0

我尝试为我的应用程序实现暗模式。我使用 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',
  },
);

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

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

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

4

1 回答 1

0

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

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

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

于 2020-11-26T08:58:12.380 回答