water-sys/app/screens/ChatScreen.tsx

import React from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { useNavigation } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { RootStackParamList } from "../../App";

type ChatScreenNavigationProp = NativeStackNavigationProp<
  RootStackParamList,
  "MainTabs"
>;

export const ChatScreen = () => {
  const navigation = useNavigation<ChatScreenNavigationProp>();

  return (
    <View style={styles.container}>
      <View style={styles.container}>
        <Text style={styles.text}>Chat Screen</Text>
        <TouchableOpacity
          style={styles.button}
          onPress={() => navigation.navigate("Balance")}
        >
          <Text style={styles.buttonText}>查看余额</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.container}>
        <Text style={styles.text}>Chat Screen</Text>
        <TouchableOpacity
          style={styles.button}
         
        >
          <Text style={styles.buttonText}>运费计算</Text>
        </TouchableOpacity>
      </View>


      <View style={styles.container}>
        <Text style={styles.text}>Chat Screen</Text>
        <TouchableOpacity
          style={styles.button}
          onPress={() => navigation.navigate("PaymentSuccessScreen")}
        >
          <Text style={styles.buttonText}>付款成功</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
  },
  text: {
    fontSize: 19,
    color: "#333",
    marginBottom: 20,
  },
  button: {
    backgroundColor: "#0066FF",
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 8,
  },
  buttonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "600",
  },
});