React Native - redux 状态更新，但标签栏没有答案

【问题标题】：React Native - redux state updates but tabbar does notReact Native - redux 状态更新，但标签栏没有
【发布时间】：2021-03-08 17:30:59
【问题描述】：

我尝试为我的应用实现暗模式。我使用 redux 状态管理来保存我当前的主题。

我在我的组件中使用 redux 连接函数来获取这个主题并以浅色或深色模式渲染组件。这很好用，但不幸的是我的 BottomTabbar 有问题。

我使用了一个功能性的自定义标签栏组件，在这里我获得了当前的 redux 状态。我还尝试将我的 AnimatedCircleBarComponent 本身连接到 redux 状态（因此将它与我的类组件连接）但结果是一样的。

const MaterialTopTabBar = props => {
 const Colors = useSelector(state => state.themeReducer.theme);

 return (
   <AnimatedCircleBarComponent
     {...props}
     style={{
       backgroundColor: Colors.tabbar,
     }}
     activeTintColor={Colors.icon}
     inactiveTintColor={Colors.icon}
     fillColor={Colors.tabbar}
     activeBackgroundColor={Colors.iconActive}
     // indicatorStyle={styles.indicatorStyle}
     // style={styles.root}
   />
 );
};

这是我的导航器：

const MainTab = createMaterialTopTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: ({screenProps}) => {
        return {
          tabBarLabel: () => <Text></Text>,
          tabBarIcon: ({tintColor, focused}) => (
            <Icon
              size={28}
              name={focused ? 'home' : 'home-outline'}
              style={
                focused
                  ? {color: screenProps.Colors.textWhite}
                  : {color: screenProps.Colors.icon, top: 6}
              }
            />
          ),
        };
      },
    },

    Restaurants: {
      screen: RestaurantScreen,
      navigationOptions: ({screenProps}) => {
        return {
          tabBarLabel: () => <Text></Text>,
          tabBarIcon: ({tintColor, focused}) => (
            <Icon
              size={28}
              name={focused ? 'format-list-checkbox' : 'format-list-checkbox'}
              style={
                focused
                  ? {color: screenProps.Colors.textWhite}
                  : {color: screenProps.Colors.icon, top: 6}
              }
            />
          ),
        };
      },
    },
  },
  {
    tabBarComponent: MaterialTopTabBar,
    tabBarPosition: 'bottom',
    optimizationsEnabled: true,
    swipeEnabled: false,
    initialRouteName: 'Home',
  },
);

标签栏组件确实接收到新状态，但它不会重新呈现自己。它只会在按下新标签后重新渲染并将颜色更改为新的颜色。

是否可以强制重新呈现标签栏，或者为什么这不起作用？我屏幕本身的所有其他组件都在正确更新。

我认为这是一个很常见的用例，不是吗？

【问题讨论】：

标签： react-native redux navigation tabbar darkmode

【解决方案1】：

我发现了问题。上面的代码就像一个魅力，我的问题是我的自定义标签栏组件。

它有一个拒绝更新的“ShouldComponentUpdate”方法。我调整了这个方法，现在可以了。

希望我可以帮助有关此信息的人。

【讨论】：