在 React Navigation 5 中传递参数答案

【问题标题】：Passing params in React Navigation 5在 React Navigation 5 中传递参数
【发布时间】：2020-05-29 13:03:50
【问题描述】：

我正在尝试在选项卡导航器之间传递一些参数。下面是我的程序的结构。粗体是路线

应用程序（标签导航器）：{ Main（堆栈）和 过滤器（屏幕）}

Main（堆栈导航器）：{ Home（屏幕）和 MediaDetails（屏幕）}

我在屏幕上有一个与 Filter 关联的按钮，该按钮具有 onPress() 功能。我传递了一些参数（但为了这个问题，我们只考虑参数 to）。

this.props.navigation.navigate('Home', {
    to: this.state.to,
}

现在在与 Home 关联的屏幕中，我正在读取状态内的参数，如下所示：

state = {
    to: this.props.route.params.to
}

在 App.js 中，我将 to 的初始值设置为 '2020'像这样：

<Stack.Screen 
    name="Home" 
    component={HomeScreen}                 
    initialParams={{
       to: '2020'
    }}
/>

初始值确实设置为2020。我按下按钮。假设我将 to 设置为 1900。就在 this.props.navigation.navigate 执行之前，我 console.log(this.state.to) 值并且它确实已更新到1900。但是，随着屏幕变为 Home，该值将恢复为 2020（通过 console.log 观察）

有人能指出这种诡异行为的原因吗？我一直在尝试调试这个几个小时，但没有运气。 React Navigation 5 也很新，所以在网上找不到类似的东西。任何帮助将不胜感激。感谢您一路阅读。

编辑：问题已解决，完整代码已删除！

【问题讨论】：

你能发布完整的代码吗？
感谢您的关注。我现在已经包含了完整的代码。
使用调试器代替console.log stackoverflow.com/questions/11284663/…
试过了，也渲染了。没用！

标签： react-native react-navigation react-navigation-stack react-navigation-bottom-tab react-navigation-v5

【解决方案1】：

我通过shouldComponentUpdate()中的更新状态解决了这个问题。

这个错误是由于屏幕保持挂载状态没有更新。

这是可能的，因为 GitHub 上的 ravirajn22 向我解释了这个错误背后的原因和可能的解决方案。

答案链接： https://github.com/react-navigation/react-navigation/issues/6863

【讨论】：

你能发布那个答案或至少一个链接吗？
我现在已经发布了链接。谢谢！

【解决方案2】：

/* 1. 使用参数导航到 Details 路由 */

onPress={() => {
      navigation.navigate('Details', {
        itemId: 86,
        otherParam: 'anything you want here',
      });
    }}

/* 2. 获取参数 */

const DetailsScreen = ({ route, navigation }) => {
   const { itemId } = route.params;
   const { otherParam } = route.params;
   return (
    <View></View>
    );
};

【讨论】：

如果是类组件如何获取参数

【解决方案3】：

正如Here 所说，您可以这样做：

navigation.navigate('otherStackName', {
  screen: 'destinationScreenName',
  params: { user: 'jane' },
});

【讨论】：

【解决方案4】：

在功能组件中编写简单的逻辑如下：-

在父组件中

<TouchableOpacity onPress={()=>navigation.navigate('childRoute', {data_Pass_to_Child: "Hello I am going to child component"})}>

在子组件中

const Chat = ({route}) => { 
    console.log(route.params.data_Pass_to_Child);
    return(whatever based on your UI)
}

注意：将childRoute 替换为您的路线名称，并将数据{data_Pass_to_Child: "Hello I am going to child component"} 替换为您想要传递的任何数据。

【讨论】：

【解决方案5】：

发送

props.navigation.navigate('YourScreenName', {
    your_key: any_value
});

在YourScreenName.js中接收

var valueReceived = props.navigation.state.params.your_key;

【讨论】：