使用 React Navigation 在 React Native 应用程序中共享状态

Question

我正在设置一个使用 react-native-navigation 的应用程序。我想在整个导航过程中坚持一些价值观。当我手动触发导航时，我可以在调用 navigate 时将它们作为参数传递。但是当我使用插件提供的原生导航时，我无法将其设置为参数。

在我的整个应用程序中共享 API 令牌而不需要将其存储在 AsyncStorage 中的最佳方式是什么？我是否遗漏了一些明显的解决方案？

我的App.js:

const AppStack = createBottomTabNavigator({
  Members: createStackNavigator({
    MemberList: MemberList,
    AddMember: NewMember,
  },{
    mode: 'card',
    initialRouteName: "MemberList"
  }),
  Scan: Scanner
});
const AuthStack = createStackNavigator({ Login: Login });

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

Auth 堆栈负责身份验证，在获取 API 令牌后，我使用这种方法手动重新路由到应用程序：

    this.props.navigation.navigate({
        routeName: 'App',
        params: { auth_token: data.auth_token },
        action:  this.props.navigation.navigate({
          routeName: 'MemberList',
          params: { auth_token: data.auth_token}
        })
      });

问题出现在我用底部Nav开始导航的时候，因为这个是插件处理的，好像没有持久化的参数。

Answer 1

使用 React-Redux，Redux 在应用程序级别创建集中存储。用户成功登录后，将令牌保存在商店中，您可以调用它并在您想要的任何组件中的整个应用程序中使用该状态值。访问 https://redux.js.org 还访问 https://medium.com/@aurelie.lebec/redux-and-react-native-simple-login-example-flow-c4874cf91dde

Answer 2

如果您只想存储简单的静态数据，您可以创建一个在应用中随处可用的静态变量。

export static var authToken = "your token"

然后你只需要在需要的时候导入它。

Answer 3

所以，我知道 Redux 已经被买光了——但我要在这里付出我的 2 便士。

为

在您的应用程序中，您想弄清楚您的状态将变得多么复杂。在对 post 的评论中，我看到您将 Redux 视为 'overkill' - 起初它可能看起来像这样，因为您只需要使用一次全局状态（现在）。

您需要问的问题是：我的应用程序将变得有多大？如果您正在构建一个只调用 API 的应用程序 - 那么我想它会是！但是，我的猜测是您的应用程序更加复杂。

当您开始使用状态时，redux 是一种很好的方式来理解和可预测地控制状态以及全局访问它。因此，如果它可以为您节省数小时的时间（而不是将本地状态作为道具传递），那么我会去做。

文档：https://redux.js.org/introduction/getting-started

反对

显然，如果您确实认为它有点矫枉过正，那么您可以使用异步存储等替代解决方案。请记住，这并不安全，因此您不应存储敏感数据。

Is React Native's Async Storage secure?

其他存储类型

您可以为您的应用程序使用其他类型的存储，通常是其他类型的数据库存储。

https://dev.to/purvak_pathak/the-database-selection-guide-for-react-native-3kfm

它们包括：

境界
Firebase
SQLite
核心数据
PouchDB
异步存储（不是完整的数据库，但仍然很流行）

使用 React Navigation 在 React Native 应用程序中共享状态

Sharing state across React Native app with React Navigation

reactjs

react-native

react-native-navigation