如何在 react-native-router-flux 中的选项卡之间共享状态？答案

【问题标题】：How to share state between tabs in react-native-router-flux?如何在 react-native-router-flux 中的选项卡之间共享状态？
【发布时间】：2017-12-09 03:09:25
【问题描述】：

所以我有一个使用 react-native-router-flux 的 TabNavigation 场景。我想在按下第二个选项卡时将状态从初始选项卡屏幕组件共享到第二个选项卡屏幕组件。最好的方法是什么？

这是我的带有两个子标签的 TabNavigation 场景：

                  <Scene key="showPlaceTabBar" tabs={true} labelStyle={{fontSize: 20, marginBottom: 15}} hideNavBar>
                   <Scene key="postsTab" title="Posts"
                     onPress={()=> {Actions.posts()}}>
                     <Scene hideNavBar={false} key="showPlace" component={PlacesShow} title="Show Place" />

                   </Scene>

                   <Scene hideNavBar={false} key="createPostTab" title="Create Post"
                     onPress={()=> {Actions.createPost({placeName: this.props.placeName})}}>
                     <Scene key="createPost" component={CreatePost} title="Create Post" />

                   </Scene>
                 </Scene>

我想将一些状态/道具数据从 PlacesShow 组件发送到 CreatePlace 组件。 Actions 方法无法访问 PlacesShow 组件道具/状态，因为它位于定义屏幕的位置。我应该如何做到这一点？

我研究过 Redux，但我很难理解它到底做了什么。这是 Redux 的工作吗？我之前使用的是 react-navigation，但很难自定义导航栏，当我切换到 react-native-router-flux 时，一切都变得容易了 10 倍。这基本上是我的应用程序需要的最后一个导航功能，并且宁愿不引入新的库/切换回 react-navigation，除非我绝对必须这样做（自定义导航组件很难理解，我很确定那是我的应用程序需要什么）。

感谢您的帮助。

【问题讨论】：

使用AsyncStorage。
谢谢你，这正是我正在寻找的。我应该删除这个问题还是要发布答案？ @AbdennourTOUMI

标签： react-native react-native-router-flux

【解决方案1】：

AsyncStorage

由于您使用的是 React-Native ，因此您可以使用 AsyncStorage 接口来利用带下划线的设备的共享存储。

坚持：

await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.');

检索：

 const value = await AsyncStorage.getItem('@MySuperStore:key');

更多详情请见the official documentation。

【讨论】：