React Navigation 访问 redux 状态

Question

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

Answer 1

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

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

目前，您正在 React 组件外部初始化 bottomTabNavigator。我建议您将其移至名为 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>
  );
}