如何在 react-native-router-flux 中的选项卡之间共享状态?
How to share state between tabs in react-native-router-flux?
所以我有一个使用 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>
我想将一些 state/props 数据从 PlacesShow 组件发送到 CreatePlace 组件。 Actions 方法无权访问 PlacesShow 组件 props/state,因为它位于定义屏幕的位置。我应该如何做到这一点?
我研究过 Redux,但我很难理解它到底做了什么。这是 Redux 的工作吗?我之前使用过 react-navigation,但很难自定义导航栏,当我切换到 react-native-router-flux 时,一切都变得容易了 10 倍。这基本上是我的应用程序需要的最后一个导航功能,并且宁愿不将新的 libraries/switch 引入 react-navigation 除非我绝对必须这样做(自定义导航组件很难理解,我很确定这就是我的应用程序所需要的)。
感谢您的帮助。
AsyncStorage
__
由于您使用的是 React-Native ,因此您可以使用 AsyncStorage
界面利用带下划线的设备的共享存储空间。
坚持:
await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.');
检索:
const value = await AsyncStorage.getItem('@MySuperStore:key');
the official documentation 中有更多详细信息。
所以我有一个使用 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>
我想将一些 state/props 数据从 PlacesShow 组件发送到 CreatePlace 组件。 Actions 方法无权访问 PlacesShow 组件 props/state,因为它位于定义屏幕的位置。我应该如何做到这一点?
我研究过 Redux,但我很难理解它到底做了什么。这是 Redux 的工作吗?我之前使用过 react-navigation,但很难自定义导航栏,当我切换到 react-native-router-flux 时,一切都变得容易了 10 倍。这基本上是我的应用程序需要的最后一个导航功能,并且宁愿不将新的 libraries/switch 引入 react-navigation 除非我绝对必须这样做(自定义导航组件很难理解,我很确定这就是我的应用程序所需要的)。
感谢您的帮助。
AsyncStorage
__
由于您使用的是 React-Native ,因此您可以使用 AsyncStorage
界面利用带下划线的设备的共享存储空间。
坚持:
await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.');
检索:
const value = await AsyncStorage.getItem('@MySuperStore:key');
the official documentation 中有更多详细信息。