反应导航底部标签导航器动态更改背景

Question

我在React Navigation的底部标签导航器中遇到了一个问题。因此，我的应用程序中有一个深色主题，当在主题之间切换时，除了底部标签导航器外，应用程序中的所有颜色都会改变。它不会重新渲染自己。什么会导致这个想法？

当我对它进行修改时，它会重新渲染并更改颜色，例如按到另一个选项卡。

export const PostBottomNavigator = ({ navigation, route }) => {
return (
    <B_Post.Navigator
        initialRouteName="PostHome"
        labeled={false}
        headerMode="float"
        shifting={true}
        style={{ backgroundColor: colorsComponent.defaultBackgroundColor }}
        barStyle={styles().bar}
        screenOptions={({ route }) => ({
            headerShown: true,
            tabBarIcon: ({ focused, color, size }) => {
                const { name } = route;
                let icon;
                switch (name) {
                    case "PostHome":
                        icon = focused ? imagesMain.homeS_selected : imagesMain.homeS;
                        break;
                    case "Discover":
                        icon = focused
                            ? imagesMain.discover_selected
                            : imagesMain.discover;
                        break;
                    case "ModalPlaceHolder":
                        icon = focused ? imagesMain.share_selected : imagesMain.share;
                        break;
                    case "HomeTown":
                        icon = focused
                            ? imagesMain.homeTown_selected
                            : imagesMain.homeTown;
                        break;
                    case "Profile":
                        return <BottomProfileImage />;
                        break;
                    default:
                        icon = focused ? imagesMain.lastList : imagesMain.lastList;
                        break;
                }
                return <Image style={{ width: 28, height: 28 }} source={icon} />;
            },
        })}
    >
        <B_Post.Screen name="PostHome" component={Timeline} />
        <B_Post.Screen name="Discover" component={Discover} />
        <B_Post.Screen
            name="ModalPlaceHolder"
            listeners={({ navigation }) => ({
                tabPress: (event) => {
                    event.preventDefault();
                    navigation.navigate("NewPost");
                },
            })}
            component={ModalPlaceHolder}
        />
        <B_Post.Screen name="HomeTown" component={Profile} />
        <B_Post.Screen
            name="Profile"
            component={ProfileStackNavigator}
            initialParams={{ type: "social" }}
        />
    </B_Post.Navigator>
);

};