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

3

我正在设置一个使用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"
    }
  )
);

认证堆栈负责认证,获取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个回答

2

我知道Redux已经被广泛讨论了,但是我仍然要在这里发表我的看法。

赞成Redux的理由

在您的应用程序中,您需要了解状态将变得多么复杂。在评论一个帖子时,我看到你认为Redux有些“过剩”——一开始它可能看起来是这样,因为您只需要使用全局状态一次(目前)。

您需要问自己的问题是:我的应用程序会变得有多大?如果您正在构建一个简单地调用API的应用程序,那么我想它确实是过剩的!但是,我猜测您的应用程序还有更多的复杂性。

当您开始处理状态时,Redux是理解和可预测地控制状态以及全局访问它的好方法。因此,如果它可以节省您未来的时间(而不是将本地状态作为props传递),那么我会选择使用它。

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

反对Redux的理由

显然,如果您认为它是过剩的,那么您可以使用其他解决方案,如Async Storage。但请记住,这不是安全的,因此您不应存储敏感数据。

React Native的Async Storage是否安全?

其他类型的存储

您可以使用其他类型的存储为您的应用程序提供支持,通常是其他类型的数据库存储。

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

它们包括:

  1. Realm
  2. Firebase
  3. SQLite
  4. Core Data
  5. PouchDB
  6. Async Storage(虽然不是完整的数据库,但仍然很受欢迎)

您是否认为API令牌是敏感的,因为它可以通过使用AsyncStorage被窃取? - bo-oz
1
请看这里:https://dev59.com/wlkT5IYBdhLWcg3wIsEd - JRK
1
太好了!所以AsyncStorage对于我的特定用例似乎很不错。谢谢,我将您的答案标记为解决方案。 - bo-oz

1

我了解了Redux,但对于非常简单的用例来说似乎有些过度。我应该回归AsyncStorage吗? - bo-oz
Redux是维护集中式存储的最佳方法,但对于小型应用程序,您也可以使用AsyncStorage。不要忘记维护回调场景,否则它的效率就会下降。 - Ashutosh Patel

0
如果您只想存储一个简单的静态数据,您可以创建一个在应用程序中随处可用的静态变量。
export static var authToken = "your token"

接下来当你需要时,只需要导入它即可。


这是一个动态令牌,来自API调用。 - bo-oz

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接