时间戳

首页 > 解决方案 > React Native - 如何在反应导航中的 StackNavigators 之间传递道具？

reactjs - React Native - 如何在反应导航中的 StackNavigators 之间传递道具？

问题描述

我正在使用 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' });

我怎样才能进入myDataHomeScreen？this.props.navigation.state.params在我的情况下为空。

标签： reactjsreact-nativereact-navigation

解决方案

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

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

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

有关更详细的解释，请查看此github 问题

推荐阅读