如何在 routeConfig 中访问 redux 存储（react-navigation）答案

【问题标题】：How to access redux store in routeConfig (react-navigation)如何在 routeConfig 中访问 redux 存储（react-navigation）
【发布时间】：2019-11-28 13:51:25
【问题描述】：

代码示例如下：

const mapStateToProps = (state: RootState) => ({
  isSwipeEnabled: state.permissions.isSwipeEnabled,
});

const MainNavigator = createMaterialTopTabNavigator(
  {
    Screen1,
    Screen2: {
      screen: Screen2,
      navigationOptions: {
        swipeEnabled: isSwipeEnabled, <==HERE I WANT TO USE MY REDUX STATE
      },
    },
  },
  {
    initialRouteName: 'Screen1',
    tabBarPosition: 'bottom',
  },
);

export default connect(mapStateToProps)(MainNavigator);

是否可以在 createMaterialTopTabNavigator 函数中访问 redux？如果是，如何？

谢谢！

【问题讨论】：

什么是 Redux 访问权限？到商店？行动？

标签： react-native redux react-navigation

【解决方案1】：

您可以在连接到 redux 的 App 组件的构造函数中创建导航器。在构造函数中，您可以从道具访问映射状态：

const mapStateToProps = (state: RootState) => ({
    isSwipeEnabled: state.permissions.isSwipeEnabled
});

class NavigationApp extends React.Component {
    constructor(props) {
        super(props);

        this.mainNavigator = createMaterialTopTabNavigator(
            {
                Screen1,
                Screen2: {
                    screen: Screen2,
                    navigationOptions: {
                        // here you now can use your mapped redux state from props
                        swipeEnabled: props.isSwipeEnabled, 
                    }
                }
            },
            {
                initialRouteName: 'Screen1',
                tabBarPosition: 'bottom'
            },
        );
    }

    render() {
        // use here any function from react-navigation which you are using in your environment
        // e.g. createAppContainer
        // in this example I am using createBrowserApp for using react-navigation in web app
        const App = createBrowserApp(this.mainNavigator);
        return (<App />);
    }
}

export default connect(mapStateToProps)(NavigationApp);

【讨论】：