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

Posted 2023-02-22

【中文标题】在两个堆栈之间传递参数 - React Native

【英文标题】：pass parameters between two stacks - React Native

【发布时间】：2019-05-27 00:33:32

【问题描述】：

我的应用应该有一个登录屏幕，使用 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;

但是，我仍然需要在 2 个单独的堆栈之间传递的答案

【问题讨论】：

github.com/react-navigation/react-navigation/issues/3787

【参考方案1】：

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

当您从LoginSplashScreen 使用this.props.navigation 时，您实际上处于AuthStack 的沙盒导航范围内，该范围仅限于其自己的导航器路线。现在，当您将两个堆栈绑定在一个导航器中作为 SwitchNavigator 的 Routes 时，您正在进入一个父导航器的范围，该范围提供了自己的导航道具，所以如果您使用了开关的 navigation 道具navigator，那么您将在 AppStack 中获得参数，但从那以后。

我建议正确执行以下三种方法：

使用登录屏幕作为 SwitchNavigator 的直接路由，从而移除用于分离路由的无用堆栈导航器。

代码应如下所示：

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

使用 redux 将数据存储在一个常用的存储中，并在另一个答案中描述的不同组件上使用它，但这不是主要使用 redux 的原因。 p>

在切换导航器中使用新组件代替 AppStack，同时将 LoginSplashScreen 作为 SwitchNavigator 的直接路由之一，并在新组件内渲染 AppStack 并传递收到的 @987654329 @ as 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 />
     )
   

【讨论】：

太棒了！谢谢你的翔实回答，我从中学到了很多！我会做。另一个小问题，如果我需要在我的菜单屏幕上进行抽屉导航，在登录屏幕之后，但在同一个屏幕上应该有其他按钮，而不是在抽屉中（！）发送到另一个屏幕？

【参考方案2】：

在某些情况下，您不想分离堆栈以分离关注点，或者在您的情况下，您可以在此处执行的操作是通过嵌套导航器传递参数，如此处的反应导航器文档 React Navigator Docs 中所述。

在你的情况下，我会这样发送参数：

this.props.navigation.navigate('AppStack', screen: 'MenuScreen', params: signedIn: true, name: result.user.name, photoUrl: result.user.photoUrl , );

希望这对以后的人有所帮助。我已经对此进行了测试，因为我有一个确切的实现。

【讨论】：

感谢您的帮助，不过已经2年多了。我希望其他人可以使用此信息:)

为我工作，谢谢！

【参考方案3】：

据我在您的代码中所见，一切似乎都很好，可能是您正在对其进行 JSON.stringifying，也许尝试分别获取每个参数，即this.props.navigation.getParam('signedIn', false);

对于使用react-navigation 的身份验证流程，您应该遵循以下指南：https://reactnavigation.org/docs/en/auth-flow.html，这样您在登录后就不会返回返回按钮。

对于存储数据，例如您从谷歌返回的身份验证响应，我建议使用AsyncStorage 或其他形式的存储库，例如react-redux。这是一个非常简单的例子，它使用了react-redux:https://medium.com/@aurelie.lebec/redux-and-react-native-simple-login-example-flow-c4874cf91dde。

我个人会推荐一个存储系统，因为您的整个应用程序都可以访问auth 状态，而不是不断地将其作为参数发送。

【讨论】：

谢谢你的回答我试过分别获取每个参数，结果是一样的。

另外，您推荐的 auth -flow 正是我所做的 :) ，至于 redux。由于某种原因，我无法安装 redux，所以我刚刚开始了一个没有它的项目

您能否将其仅发送到 MenuScreen 而不是 AppStack，看看您是否可以在 MenuScreen 中检索它。所以：this.props.navigation.navigate('MenuScreen', signedIn: true, name: result.user.name, photoUrl: result.user.photoUrl );