在两个堆栈之间传递参数-React Native

Question

我的应用应具有Google的登录屏幕，因此登录后进入菜单屏幕。

为了在认证后进入菜单屏幕后不按返回按钮时返回登录屏幕。我已经将堆栈分开，一个用于登录，另一个用于其他屏幕

在App.js中：

const AuthStack = createStackNavigator({
  LoginSplashScreen: LoginSplashScreen 
});
const AppStack = createStackNavigator({ 
  MenuScreen:MenuScreen,
  DetailsScreen: DetailsScreen,
  PhotoScreen: PhotoScreen,
  DocumentScreen: DocumentScreen,
  AudioScreen: AudioScreen,
  ScheduleScreen: ScheduleScreen,
  SettingsScreen: SettingsScreen,
  FilesScreen: FilesScreen,
  GalleryScreen: GalleryScreen
   });


const Root= createAppContainer(createSwitchNavigator(
  {
    AuthStack:AuthStack,
    AppStack:AppStack
  },
  {
    initialRouteName: 'AuthStack',
  }
));

export default class App extends React.Component {
  render() {
    return (
      <Root/>  
    )
  }
}

因此在身份验证后的LoginSplashScreen中，我使用以下代码进行导航：

    this.props.navigation.navigate('AppStack', {
      signedIn: true,
      name: result.user.name,
      photoUrl: result.user.photoUrl
    });

导航效果很好，但是当发出警报时，实际上不会传递参数“ name”，“ signedIn”，“ photoUrl”

    Alert.alert('',JSON.stringify(this.props.navigation.state.params))

在菜单屏幕（第二个堆栈）上，它为空

我究竟做错了什么？

为什么我的参数没有传递？因为我可能需要另一个抽屉导航。

有没有一种方法可以为应用程序中的所有屏幕设置全局参数？

有没有更好的方法来避免在菜单屏幕上按回并且不获得登录屏幕？

编辑：

我设法通过设置全局参数来解决此特定问题：

global.param= result.param;

但是，我仍然需要一个答案来在两个分离的堆栈之间传递

Answer 1

通过创建两个单独的堆栈，您已经分离了params范围，您想要做的是：使用另一个导航范围将params发送到一个完全不同的导航范围，尽管生活在一个共同的环境中，但实际上它完全不知道前一个父母

当您使用this.props.navigationfrom LoginSplashScreen时，实际上是在您的沙盒导航范围内，AuthStack该范围仅限于其自己的导航器路线。现在，当您Routes从SwitchNavigator 将两个堆栈绑定到一个导航器中时，您将进入一个父导航器的作用域，该作用域提供了自己的导航道具，因此，如果您将使用navigationswitch导航器的道具，那么您将在您的AppStack中获得了参数，但是之后。

我建议以下是正确执行此操作的以下三种方法：

1. 使用登录屏幕作为SwitchNavigator的直接路由，从而删除了无用的登录堆栈导航器，该导航器正在分离路由。

该代码应如下所示：

const Root= createAppContainer(createSwitchNavigator({
   LoginSplashScreen: LoginSplashScreen 
   AppStack:AppStack
}, {
initialRouteName: 'LoginSplashScreen',
}));

2. 使用redux将数据存储在通常可访问的存储中，并按照另一个答案中的描述在不同组件上使用它，但这不是主要使用redux的原因。

3. 在Switch导航器中使用New Component代替AppStack，同时将它LoginSplashScreen作为SwitchNavigator的直接路由之一，并AppStack在New Component内部进行渲染，然后params像screenProps在AppStack那样简单地在堆栈路由中使用screenProps 传递接收到的内容。

该代码应如下所示：

 const Root= createAppContainer(createSwitchNavigator({
   LoginSplashScreen: LoginSplashScreen, 
   MyMediatorScreen: MyFancyComponent
}, {
initialRouteName: 'AuthStack',
}));

例如。FancyComponent将如下所示：

class MyFancyComponent extends React.Component{
   constructor (props){
      super (props); 
   }

   render () {
     const {params} = this.props.navigation.state;
     return (
        <AppStack screenProps = {params} />
     )
   }
}