Question

我正在尝试将用户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组件。

任何帮助将不胜感激！

Answer 1

尝试一下：

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

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

将参数从堆栈导航器传递到选项卡导航器（反应导航5）

1 个答案: