在 React 导航中传递参数 5.

Question

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

App(Tab Navigator(： {main(stack( &Filter(screen( }

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中，我将 的初始值设置为"2020"，如下所示：

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

初始值确实设置为2020年。我按下按钮。假设我设置为1900。就在this.props.navigation.navigate执行之前，我控制台.log(this.state.to(该值，它确实更新为1900。但是，当屏幕更改为主页时，该值将恢复为2020年(通过控制台观察到.log(

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

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

Answer 1

/* 1.使用参数导航到详细信息路由 */

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

/*阿拉伯数字。获取参数 */

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

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

Answer 2

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

此错误是由于屏幕保持挂载状态未更新所致。

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

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

Answer 3

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

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

Answer 4

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

1. 在父组件中

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

2. 在子组件中

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"}替换为要传递的任何数据。

Answer 5

发送

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

在您的屏幕名称中接收.js

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