React-Native 在两个屏幕之间发送参数答案

【问题标题】：React-Native sending parameter between 2 screensReact-Native 在两个屏幕之间发送参数
【发布时间】：2023-01-15 14:31:03
【问题描述】：

React-native 菜鸟在这里，

我有 2 个屏幕。用户在名为 InputName 的屏幕上填写他们的名字，然后当他们单击一个按钮时，他们会转到 HomeScreen，并且应该会在该屏幕上看到他们的名字。我正在使用 React Navigation 在屏幕之间导航。 InputName Screen 上的代码如下所示：

const InputName = ({ navigation }) => {
const [username, setUsername] = useState('');

const handleName = async () => {
    if (!username.trim()) {
        alert('Please fill in a name')
    } else {
        navigation.navigate("CommonScreens", {
            screen: "Home",
            state: {
                username: username,
            },
        });
        console.log(username)
        AsyncStorage.setItem("hasSeenWelcome", "true");
    }
}

一旦用户按下按钮，就会执行 handleName。在 InputName 屏幕上，用户在具有以下代码的 TextInput 中填写他们的姓名：

<TextInput
 style={style}
 placeholder="Fill in your name here"
 onChangeText={text => setUsername(text)}
/>

我试图检索此用户名的屏幕是 HomeScreen。我用来检索它的代码如下：

const HomeScreen = ({ navigation, route }) => {
    let username = route.params?.username;
    {console.log(username)}

如您所见，我在 InputName 屏幕和 HomeScreen 上都有 console.log。在 InputName 中，我得到了我填写的值，在 HomeScreen 中，它返回为未定义。

编辑：导航结构

function WelcomeStackScreen() {
  return (
    <WelcomeStack.Navigator
      initialRouteName="Welcome"
      screenOptions={{ headerShown: false }}
    >
      <WelcomeStack.Screen name="Welcome" component={WelcomeScreen} />
      <WelcomeStack.Screen
        name="ChooseDepartment"
        component={ChooseDepartment}
      />
      <WelcomeStack.Screen
        name="InputName"
        component={InputName}
      />
    </WelcomeStack.Navigator>
  );
}

function CommonScreensStackScreen() {
  return (
    <CommonScreensStack.Navigator screenOptions={{ headerShown: false }}>
      <CommonScreensStack.Screen name="HomeTab" component={HomeTabScreen} />
      <CommonScreensStack.Screen name="QuizScreen" component={DilemmasScreen} />
      <CommonScreensStack.Screen name="UitlegScreen" component={UitlegScreen} />
      <CommonScreensStack.Screen
        name="PrivacyPolicy"
        component={PrivacyPolicy}
      />
      <CommonScreensStack.Screen
        name="AlgemeneVoorwaarden"
        component={AlgemeneVoorwaarden}
      />
      <CommonScreensStack.Screen
        name="ChooseDepartment"
        component={ChooseDepartment}
      />
      <CommonScreensStack.Screen
        name="Toelichting"
        component={ToelichtingScreen}
      />
      <CommonScreensStack.Screen name="Results" component={ResultScreen} />
    </CommonScreensStack.Navigator>
  );
}

<HomeTab.Navigator
      initialRouteName="Home"
    >
      <HomeTab.Screen name="Results" component={ResultsScreen} />
      <HomeTab.Screen name="Home" component={HomeScreen} />
      <HomeTab.Screen name="Settings" component={SettingsScreen} />
    </HomeTab.Navigator>

任何帮助/指针将不胜感激！

【问题讨论】：

标签： react-native react-hooks react-navigation

【解决方案1】：

尝试更改您的navigation.navigate()，如下所示：

navigation.navigate("Home", {
            username: username,
        });

【讨论】：

我收到一个错误 :( “带有负载 {"name":"Home","params":{"username":"Test"}} 的操作 'NAVIGATE' 没有被任何导航器处理。你有一个名为'主页'？”我将使用我的导航结构编辑原始帖子。
你在CommonScreensStackScreen中用CommonScreensStack.Screen来称呼你的WelcomeStackScreen，比如HomeTabScreen吗？

【解决方案2】：

使用params字段代替state来传递参数。

navigation.navigate('CommonScreens', {
  screen: 'Home',
  params: { username: username },
});

见Passing params to nested navigators。

【讨论】：