javascript - 将参数从 Stack-navigator 传递到选项卡导航器 (react-navigator 5)

标签 javascript react-native redux react-navigation-stack react-navigation-bottom-tab

我正在尝试将用户 ID 从登录屏幕传递到主屏幕,这是嵌套选项卡导航器的一部分。 这是我的应用程序的结构:

 const mainStack = () =>(

             <Tab.Navigator


             tabBarOptions={{
              activeTintColor: 'tomato',
              inactiveTintColor: 'gray',
            }}
             >
                <Tab.Screen name="Home" component={Homescreen} 
                 options = {{headerStyle: {backgroundColor: 'yellow'}}}
                />
                <Tab.Screen name="Profile" component={otherStack} />
             </Tab.Navigator>

    )




export default () => (

        <NavigationContainer >
              <Stack.Navigator screenOptions={{
                  headerShown: false
                  }}>
                <Stack.Screen name='Welcome' component={WelcomeScreen} />
                <Stack.Screen name = 'Register' component = {RegisterScreen} />
                <Stack.Screen name= 'Login' component={LoginScreen} />
                <Stack.Screen name = 'mainStack' component={mainStack} />
              </Stack.Navigator>



        </NavigationContainer>

)

每当我从登录屏幕转到主页并调用 this.props.navigation.getParam('id') 时,我都会收到一条错误消息,指出它不是函数。经过仔细检查,我发现 this.props.navigation.state 未定义。可能意味着我的参数没有传递到主屏幕,即使我导航到它没有任何问题。

我尝试使用 NavigationActions,但收到一个在其他地方未提及的错误。

我像这样导航到主页:

this.props.navigation.navigate('Home' { id: 'myId' })

我也尝试过这个语法:

 navigation.navigate('Root', {
  screen: 'Settings',
  params: { user: 'jane' },
});

但我得到了同样的错误

还值得注意的是,我使用了 React.component,而不是将屏幕变成函数。我不确定这是否会导致任何问题,因为在 React-navigation v5 教程中我看到这个人使用函数而不是 React 组件。

任何帮助将非常感激!!

最佳答案

试试这个:

props.navigation.navigate('mainStack' { params: {id: 'myId'}, screen: 'Home' )

当访问而不是使用 getParam 时,请使用 props.route.params.id

关于javascript - 将参数从 Stack-navigator 传递到选项卡导航器 (react-navigator 5),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61254897/

相关文章:

javascript - 使用谷歌分析跟踪页面等哈希链接

javascript - React - 使用 reduxForm 的两个语句之间的差异

javascript - 如何在 React 或 React Native 中重构来自 Parse(或任何数据源)的响应?

javascript - 如何在 redux 中将唯一项添加到数组中

reactjs - 如何在 React 中创建带有 for 循环的选择框?

javascript - 制作脚本书签

javascript - Coldfusion 使用 javascript 显示/隐藏 div block

javascript - 为什么我的 jQuery Flex Slider 没有暂停?

ios - 从react-native-fcm迁移到react-native-firebase时出错

react-native - 带有babel-preset-react-native/index.js的TransformError