React Native Android深色模式下ArrowBackIcon颜色显示异常求助

你的问题是因为NativeBase组件默认会跟随系统主题模式加载预设样式，显式设置的color="white"在深色模式下被主题的深色样式覆盖了。下面是几种可行的解决方法：

方法1：根据主题模式动态切换颜色 #

用React Native的useColorScheme钩子获取当前模式，动态设置图标颜色：

import { useColorScheme } from 'react-native';
import { ArrowBackIcon } from "native-base";

// 组件内部
const colorScheme = useColorScheme();

<Pressable onPress={() => navigationRef.goBack()}>
  <ArrowBackIcon size="lg" color={colorScheme === 'dark' ? 'white' : 'black'} />
</Pressable>

方法2：全局配置主题颜色 #

如果需要统一所有图标的深色/浅色模式颜色，可以扩展NativeBase主题：

import { extendTheme, ThemeProvider } from 'native-base';

const customTheme = extendTheme({
  colors: {
    // 浅色模式下的图标颜色
    light: {
      iconPrimary: 'black',
    },
    // 深色模式下的图标颜色
    dark: {
      iconPrimary: 'white',
    },
  },
});

// 在根组件中包裹ThemeProvider
export default function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* 你的应用内容 */}
    </ThemeProvider>
  );
}

之后使用图标时直接引用主题颜色：

<ArrowBackIcon size="lg" color="iconPrimary" />

方法3：强制设置样式优先级 #

如果组件的color属性被主题覆盖，可以直接通过style属性强制指定颜色：

<Pressable onPress={() => navigationRef.goBack()}>
  <ArrowBackIcon size="lg" style={{ color: 'white' }} />
</Pressable>

内容的提问来源于stack exchange，提问作者ludinj