Question

我正在努力在堆栈/屏幕之间传递参数。

我有以下带有几个堆栈的应用程序容器：

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    Auth: AuthStack,
    Tab: TabStack,
    Menu: MenuStack
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

在身份验证堆栈中，我有登录屏幕。登录后，我想将userName传递给其他堆栈，例如以便与我的XMPP服务器建立Web套接字连接。

this.props.navigation.navigate('Tab', { userName: loginData.username })

不幸的是，我不知道如何访问userName参数。调用navigation.getParam('userName')时，我总是会变得不确定（我可以确认loginData.username并非未定义）。

在堆栈之间不传递参数是否正确？

如果是，那么我至少知道这种现象的原因。但是我如何才能通过userName（我读到AsyncStorage是一种针对此类信息的反模式，因此在这种情况下设置Redux似乎有点工程化）？ / p>

Answer 1

在您去过的路线中，您可以像这样访问参数：

this.props.navigation.state.params.userName

它位于documentation page底部“摘要”下。始终值得检查参数是否不为null，因为如果没有参数，this.props.navigation.state.params返回null。

if(this.props.navigation.state.params && this.props.navigation.state.params.userName) {
  //do something
}

这是在navigate.getParam()中引入2.X函数之前获取路线参数的原始方法。

Answer 2

我强烈建议您签出此包裹： https://github.com/vonovak/react-navigation-props-mapper 大大简化了流程。

Answer 3

我可以通过导航到具体路由而不是堆栈名称来解决问题。

this.props.navigation.navigate('Map', { userName: loginData.username });

因此Map路线是TabStack的一部分

Answer 4

似乎无法将参数传递给“堆栈”。似乎只能将参数传递给“screen.”

将参数传递给嵌套屏幕（“屏幕”，它是“堆栈”的一部分）与将参数传递给“”的方法不同>screen”，定义为“标签”。


// example of a stack definition 
const Stack_1 = () => {
    const MyStack = createStackNavigator();
    return (
        <MyStack.Navigator>
            <MyStack.Screen name="Screen_1_in_Stack_1" component={Screen_1_in_Stack_1} />
        </MyStack.Navigator>
    );
};

// example for passing parameters to a screen, which is part of a stack: 
navigation.navigate('Stack_1', {
  screen: 'Screen_1_in_Stack_1',
  params: { userID: '123' },
});

在堆栈/屏幕之间传递参数

4 个答案: