如何通过单击 React Native 中的按钮将文本输入发送到不同的屏幕

Question

我正在尝试开发一个应用程序，允许用户在屏幕“PostScreen”上输入歌曲的标题，然后单击按钮时，会在主屏幕上看到他们输入的标题，称为“TabOneScreen”。问题是它一直说它“无法读取未定义的‘歌曲’的属性”

这是屏幕“PostScreen”的代码：

import { StatusBar } from 'expo-status-bar';
import { Platform, StyleSheet, TextInput, SafeAreaView, Pressable, Button } from 'react-native';
import { useState } from 'react';
import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
import { useNavigation } from '@react-navigation/native';



export default function PostScreen({ navigation }: RootStackScreenProps<'Post'>) {
    const [song, setSong] = useState('song')
    const saveSong = () =>{
        navigation.navigate('Root', {
            song: song,
        });
    };

        return (
          <View style={styles.container}>
            <TextInput 
            style={styles.input}
            placeholder='Enter a Song' 
            onChangeText={(val) => setSong(val)}/>

            <Text> The song you will post is: {song}</Text>

            <Button
                title='Post Song'
                mode='contained'
                onPress={saveSong} />
          </View>
        );
      };

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: '#777',
    padding: 8,
    margin: 10,
    width: 200,
    color: 'blue',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: '80%',
  },
});

这是屏幕“TabOneScreen”的代码：

import { StyleSheet, Pressable } from 'react-native';
import { useState } from 'react';
import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
import { RootTabScreenProps } from '../types';
import { useRoute } from '@react-navigation/native';

export default function TabOneScreen({ navigation }: RootTabScreenProps<'TabOne'>) {
  const route = useRoute();

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Me-Lody</Text>
      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
      <Text>Here is where you will find your friends' posts for the day</Text>
      <View style={styles.serparator} lightColor='#eee' carkColor="rgba(255,255,255,0.1)" />
      <Pressable onPress={() => navigation.replace('Post')} 
      style={styles.link}> 
      <Text> Click me to post a song!</Text></Pressable>
      <Text style={{ fontSize: 20}}> The song you recently posted is: {route.params.song}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: '80%',
  },
  link: {
    borderWidth: 1,
    borderColor: '#777',
    padding: 8,
    margin: 10,
    width: 200,
    color: 'blue',
  }
});

Answer 1

我会分享我的工作版本

这是 App.tsx 的代码（其中包含 createStackNavigator）

import 'react-native-gesture-handler';
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import PostScreen from "./src/screens/PostScreen";
import TabOneScreen from "./src/screens/TabOneScreen";
import { NavigationType } from "./src/types/NavigationTypes";

const Stack = createStackNavigator<NavigationType>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="PostScreen" component={PostScreen} />
        <Stack.Screen name="TabOneScreen" component={TabOneScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import PostScreen from "./src/screens/PostScreen";
import TabOneScreen from "./src/screens/TabOneScreen";
import { NavigationType } from "./src/types/NavigationTypes";

const Stack = createStackNavigator<NavigationType>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="PostScreen" component={PostScreen} />
        <Stack.Screen name="TabOneScreen" component={TabOneScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

下面是这个项目中使用的类型的代码

import { StackScreenProps } from "@react-navigation/stack";

export type NavigationType = {
  PostScreen: undefined;
  TabOneScreen: { song: string };
};

export type PostScreenProps = StackScreenProps<NavigationType, "PostScreen">;

export type TabOneScreenProps = StackScreenProps<
  NavigationType,
  "TabOneScreen"
>;

下面是PostScreen.tsx的代码

import { StatusBar } from "expo-status-bar";
import {
  Platform,
  StyleSheet,
  TextInput,
  SafeAreaView,
  Pressable,
  Button,
  View,
  Text,
} from "react-native";
import { useState } from "react";
// import EditScreenInfo from '../components/EditScreenInfo';
// import { Text, View } from '../components/Themed';
import { useNavigation } from "@react-navigation/native";
import { PostScreenProps } from "../types/NavigationTypes";

export default function PostScreen({ navigation }: PostScreenProps) {
  const [song, setSong] = useState("song");
  const saveSong = () => {
    navigation.navigate("TabOneScreen", { song });
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter a Song"
        onChangeText={(val) => setSong(val)}
      />

      <Text> The song you will post is: {song}</Text>

      <Button title="Post Song" onPress={saveSong} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  input: {
    borderWidth: 1,
    borderColor: "#777",
    padding: 8,
    margin: 10,
    width: 200,
    color: "blue",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: "80%",
  },
});

下面是 TabOneScreen.tsx 的代码

import { StyleSheet, Pressable, View, Text } from "react-native";
import { useState } from "react";
import { TabOneScreenProps } from "../types/NavigationTypes";

export default function TabOneScreen({ navigation, route }: TabOneScreenProps) {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Me-Lody</Text>
      <View style={styles.separator} />
      <Text>Here is where you will find your friends' posts for the day</Text>
      <View style={styles.separator} />
      <Pressable
        onPress={() => navigation.replace("PostScreen")}
        style={styles.link}
      >
        <Text> Click me to post a song!</Text>
      </Pressable>
      <Text style={{ fontSize: 20 }}>
        {" "}
        The song you recently posted is: {route.params.song}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: "80%",
  },
  link: {
    borderWidth: 1,
    borderColor: "#777",
    padding: 8,
    margin: 10,
    width: 200,
    color: "blue",
  },
});

请试试这个。