Динамическое изменение фона навигатора нижней вкладки React navigation

#react-native #react-navigation

#react-native #реагирующая навигация

Вопрос:

Я столкнулся с проблемой с навигатором нижней вкладки 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>
);
  

};

Комментарии:

1. Как переключить тему?

2. Я сохраняю значение темы в MobX Store. Значение может быть светлым или темным. И я сохраняю это значение в файлах, где я храню цвета и изображения значков. У меня есть отдельные папки для обоих режимов, называемые «темный» и «светлый», и они вызываются темой. Я надеюсь, вы поняли идею

3. И как ваш навигатор получает обновленную тему? Подключен ли ваш навигатор к хранилищу?

4. Нет, сами цвета являются функциями получения, они обновляются. Это действительно работает, но, как я уже сказал, просто требует выполнения действия

5. Да, но как ваш навигатор будет уведомлен об обновлении и повторно отобразит его самостоятельно?