使用 redux 中保存的数据创建一个选项卡导航器（react-navigator）答案

【问题标题】：Create a tab navigator (react-navigator) with data saved in redux使用 redux 中保存的数据创建一个选项卡导航器（react-navigator）
【发布时间】：2019-08-21 03:23:45
【问题描述】：

我正在尝试使用 createMaterialTopTabNavigator 在我的 React Native 应用程序中创建一个选项卡导航器，但是我需要由我保存在 redux 中的变量来定义选项卡的数量。正如用户定义的那样，我不知道会有多少个选项卡。 redux 变量是一个数组，因此每个数组对象应该是一个选项卡。我该怎么做？

知道我的组件中有两个选项卡，这是代码。正如我所说，我需要更改它以使其依赖于 redux 变量（该数组中的每个对象都有一些我必须传递给子组件的信息）。

非常感谢你们！

const ProfileNavigator = createMaterialTopTabNavigator({
   Screen1: {
        screen: props => <ScreenHolder screenProps={props.screenProps}  />,
        navigationOptions: {title: "Screen1"}
    },
    Screen2: {
        screen: props => <ScreenHolder screenProps={props.screenProps}/>,
       navigationOptions: {title: "Screen2"}
    }
    },{
        tabBarPosition: 'top',
        swipeEnabled: true,
        animationEnabled: true,
})
export default createAppContainer(ProfileNavigator);

【问题讨论】：

标签： react-native react-navigation expo

【解决方案1】：

您可以使用 redux 状态在您的选项卡导航器文件中导入商店：

import { store } from './src/store/index'

然后你可以使用：

store.getState();

虽然我这么说，但我经常发现自己避免在 react 组件生命周期之外使用 store，更不用说使用 props 或随时间变化来直接定义导航参数。

我使用导航 setParams。

【讨论】：