gpt4 book ai didi

react-native - 在 React Navigation 5 中传递参数

转载 作者:行者123 更新时间:2023-12-05 00:46:29 26 4
gpt4 key购买 nike

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

应用程序(标签导航器):{ 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 也很新,所以在网上找不到类似的东西。任何帮助将不胜感激。感谢您一路阅读。

编辑:问题已解决,完整代码已删除!

最佳答案

/* 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/

关于react-native - 在 React Navigation 5 中传递参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60214318/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com