2

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

应用程序（选项卡导航器）：{主（堆栈）和过滤器（屏幕）}

Main (Stack Navigator): { Home (screen) & MediaDetails (screen) }

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

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。我按下按钮。假设我设置为1900。就在this.props.navigation.navigate执行之前，我console.log(this.state.to)的值，它确实更新为1900。但是，随着屏幕变为Home，该值恢复为2020（通过 console.log 观察）

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

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

4

5 回答 5

4

/* 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>
    );
};

欲了解更多信息：https ://reactnavigation.org/docs/params/

于 2020-06-26T23:29:15.480 回答
3

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

此错误是由于屏幕保持安装状态而未更新状态。

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

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

于 2020-02-19T17:58:39.313 回答
1

正如这里所说，你可以这样做：

navigation.navigate('otherStackName', {
  screen: 'destinationScreenName',
  params: { user: 'jane' },
});
于 2020-10-19T06:46:35.840 回答
0

发送

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

在YourScreenName.js中接收 

var valueReceived = props.navigation.state.params.your_key;
于 2021-08-06T15:45:47.143 回答
0

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

  1. 在父组件中
<TouchableOpacity onPress={()=>navigation.navigate('childRoute', {data_Pass_to_Child: "Hello I am going to child component"})}>
  1. 在子组件中
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"}为您要传递的任何数据。

于 2021-04-22T08:52:36.047 回答