Question

我正在按照React Navigation文档https://reactnavigation.org/docs/en/auth-flow.html

中所述使用身份验证流程

所以基本上，我有一个像这样的SwitchNavigator：

import { createSwitchNavigator, createStackNavigator } from 'react-navigation';

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

在SignInScreen中，用户登录后，我使用以下方式导航到HomeScreen：

this.props.navigation.navigate('App', { myData: 'myData' });

如何在HomeScreen中获得myData？ this.props.navigation.state.params在我的情况下为空。

Answer 1

如果params不确定，则需要使用 this.props.navigation.state.getParam（'myData'，'defaultValue'）

您可以在https://reactnavigation.org/docs/en/navigation-prop.html

中看到

Answer 2

如果在将参数传递给stacknavigator的过程中仍然有人获得空值，那是因为您不能直接将参数传递给stacknavigator。在传递参数时，它会混淆您在堆栈中所指的是哪个屏幕。如果要将参数传递给堆栈内部的路由，请直接导航至该路由。如果出现OP问题，有一种解决方法

this.props.navigation.navigate('Home', { myData: 'myData' });

但这不是传递道具的好方法，我宁愿考虑使用Redux来管理整个应用程序的状态

有关详细说明，请查看this github问题

React Native-如何在react-navigation中在StackNavigators之间传递道具？

2 个答案: