当应用程序的主题更改时，原生基础组件的主题未更新

Question

我在应用程序中使用原生基础 + 反应导航，需要更改应用程序的主题。一旦我更改主题，react-navigation 就会轻松更新，但问题是本机基本组件主题不会更改。对用户来说看起来很奇怪。

我曾使用此代码更改应用程序的主题

    <StyleProvider style={getTheme(theme === 'LIGHT' ? platform : material)}>
                <Container>
                    <NavigationContainer
                        theme={theme === 'LIGHT' ? DefaultTheme : MyThemeDark}>
                        <Stack.Navigator
                            initialRouteName={isProfile ? 'Root' : 'Selection'}>
                              ..................

                        </Stack.Navigator>
                    </NavigationContainer>
                </Container>
    </StyleProvider>

正如我所说，React 导航主题正在正确更新，但本机基本主题没有更新。

Answer 1

对于 Native Base 3，要更改主题，可以使用 React Native hookuseColorScheme获取设备的当前主题，并使用 Native Base 方法更新主题setColorMode。

我相信代码需要添加为NativeBaseProvider. 例如，如果您在 App.jsNativeBaseProvider中定义，则可能无法在 App.js 中工作。

import React from "react";
import { useColorMode } from 'native-base';
import { useEffect } from 'react';
import { Alert, useColorScheme } from 'react-native';

export const UseColorMode = () => {
  const colorScheme = useColorScheme();
  const {
    setColorMode,
  } = useColorMode();

  useEffect(() => {
    if (colorScheme) {
      Alert.alert(`${colorScheme}`)
      setColorMode(colorScheme);
    }
  }, [colorScheme, setColorMode])

  return (<></>)
}

应用程序.js

const App = () => {
  return (<NativeBaseProvider>
    <UseColorMode/>
  </NativeBaseProvider>)
}