Expo + TypeScript React Native应用中配置Android导航栏为白色背景深色图标

我仔细看了你提供的代码和遇到的问题——明明已经在配置文件和布局代码里设置了导航栏样式，但Android底部导航栏还是黑底白图标对吧？咱们一步步来梳理问题，把这个样式调整到位。

一、修正app.config.js中的全局配置 #

你在app.config.js的android.androidNavigationBar里设置了backgroundColor: "transparent"，这会让导航栏透明，背后的页面背景（如果是深色）就会透出来，看起来还是黑底。另外，这个配置是Expo用来生成原生Android配置的，必须设置正确的背景色：

修改后的android配置片段：

"android": {
  "adaptiveIcon": {
    "foregroundImage": IS_DEV ? "./assets/images/icon_dev.png" : "./assets/images/icon.png",
    "backgroundColor": "#ffffff"
  },
  "androidNavigationBar": {
    "barStyle": "dark-content", // 指定深色图标
    "backgroundColor": "#ffffff", // 设置白色背景
  },
  "package": IS_DEV ? "com.canyoningworld.canyonhunt.dev" : "com.canyoningworld.canyonhunt",
},

⚠️ 注意：如果用Expo Go测试，修改app.config.js后需要重启Expo Go并重新加载项目；如果是EAS构建或者本地预构建（expo prebuild），必须重新构建应用才能让全局配置生效。

二、调整_app_layout.tsx中的动态导航栏设置 #

你在useEffect里设置了NavigationBar.setVisibilityAsync("hidden")，这会直接隐藏导航栏，自然看不到你设置的样式！另外，要确保动态设置的样式和全局配置一致，避免冲突：

修改后的useEffect代码：

useEffect(() => {
  async function prepare() {
    if (Platform.OS === 'android') {
      // 先确保导航栏可见，不然样式设置了也看不到
      await NavigationBar.setVisibilityAsync("visible");
      // 同步设置白色背景 + 深色图标
      await NavigationBar.setBackgroundColorAsync('white');
      await NavigationBar.setButtonStyleAsync('dark');
      // 如果不需要导航栏覆盖页面内容，就注释掉下面这行
      // await NavigationBar.setBehaviorAsync('overlay-swipe');
    }
    if (loaded) {
      await SplashScreen.hideAsync();
    }
  }
  prepare();
}, [loaded]);

这里的核心是先让导航栏显示，再应用样式。如果不需要导航栏悬浮在页面上方，就去掉setBehaviorAsync('overlay-swipe')，避免页面底部内容被遮挡。

三、额外排查点 #

如果上面的修改还是没生效，可以检查这几个地方：

• 第三方库冲突：比如你用到的@rnmapbox/maps，某些地图组件可能会默认修改状态栏/导航栏样式。可以暂时注释掉地图相关代码，测试导航栏是否正常显示样式。
• 系统深色模式：虽然你设置了userInterfaceStyle: "light"，但部分设备的系统深色模式可能会强制覆盖应用样式。可以在设备设置里关闭深色模式，再测试应用。
• 缓存问题：清除Expo Go的缓存（长按Expo Go图标 → 清除缓存），或者删除项目的node_modules和package-lock.json后重新安装依赖。

内容来源于stack exchange