reactjs - React Navigation 访问 redux 状态

Question

我想知道是否有办法在 App.js 中访问 redux 状态？

标签： reactjsreact-nativereact-reduxreact-navigation

Answer 1

可以从 App.js 中获取 redux 数据。您可以使用该store#getState方法执行此操作。使用此方法的唯一问题是 App.js不会在 redux 存储更改时更新。

要从 redux 状态获取数据并自动订阅更改，您必须使用useSelector钩子或使用 HOC 包装您的组件。

目前，您正在初始化bottomTabNavigatorReact 组件的外部。我建议您将其移至名为MainFlow. 这个容器将负责渲染bottomTabNavigator. 为 mainFlow 路由而不是 createBottomTabNavigator 加载此容器。

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useSelector } from 'redux';

// import your page containers

const Tab = createBottomTabNavigator();

export default function MainFlow() {
  // here you can use the `useSelector` hook to get the icon
  const tabBarIcon = useSelector(state => state.routing.tabBarIcon);

  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={() => ({
          tabBarIcon: ({focused}) => {
            // render icon
          }
        })}
      >
        <Tab.Screen name="homeScreen" component={HomePageContainer} />
        <Tab.Screen name="explore" component={ExplorePageContainer} />
        {/* rest of the tabs */}
      </Tab.Navigator>
    </NavigationContainer>
  );
}