代码之家  ›  专栏  ›  技术社区  ›  bo-oz

通过React导航跨React Native应用程序共享状态

  •  3
  • bo-oz  · 技术社区  · 7 年前

    我正在设置一个使用 react-native-navigation . 我希望在导航中保持一些值。当我手动触发导航时,我可以在调用中将这些参数作为参数传递给 navigate . 但是当我使用插件提供的本地导航时,我无法将其设置为参数。

    如果不需要将API令牌存储在异步存储中,那么在整个应用程序中共享它的最佳方法是什么?我是否缺少一些明显的解决方案?

    我的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"
        }
      )
    );
    

    身份验证堆栈负责身份验证,获取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}
            })
          });
    

    当我开始使用底部导航时,问题就出现了,因为这是由插件处理的,似乎没有持久的参数。

    3 回复  |  直到 7 年前
        1
  •  2
  •   JRK    7 年前

    所以,我知道Redux已经被收购了-但我要在这里给我2便士。

    为了

    在您的应用程序中,您希望了解您的状态将变得多么复杂。在一篇文章的评论中,我看到你认为redux是“过度杀戮”,一开始它看起来像这样,因为你只需要使用一次全局状态(现在)。

    你需要问的问题是:我的申请会有多大?如果你正在构建一个简单地调用API的应用程序-那么我想它会是!但是,我猜你的应用程序更复杂。

    当您开始使用state时,redux是一种很好的方法,可以预测地理解和控制该状态,并在全球范围内访问它。所以,如果它能帮你节省很多时间(而不是把当地的州当作道具),那么我会去的。

    Docs: 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

    它们包括:

    1. 境界
    2. 火力基地
    3. 数据库
    4. 核心数据
    5. 普赫德布
    6. 异步存储(不是全规模的数据库,但仍然很流行)
        2
  •  1
  •   Ashutosh Patel    7 年前

    使用react redux、redux在应用程序级别创建集中存储。一旦用户成功登录,将令牌保存在存储中,您可以调用它,并通过应用程序在任何您想要的组件中使用该状态值。 参观 https://redux.js.org 也 参观 https://medium.com/@aurelie.lebec/redux-and-react-native-simple-login-example-flow-c4874cf91dde

        3
  •  0
  •   MaximumLasagna    7 年前

    如果你只想存储一个简单的静态数据,你可以在应用程序的任何地方创建一个静态变量。

    export static var authToken = "your token"
    

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

    推荐文章