React Native Expo中如何修改Android底部手势栏背景色？

方案1：通过Expo配置文件设置（推荐） #

在项目根目录的app.json或app.config.js的expo字段中，配置androidNavigationBar的背景色，同时可按需调整显示模式：

{
  "expo": {
    // 其他配置项...
    "androidNavigationBar": {
      "backgroundColor": "#你的应用主背景色", // 替换为你应用实际的背景色值
      "visible": "sticky-immersive", // 保持手势栏可见且沉浸，可选配置
      "translucent": false // 设为true时手势栏半透明，根据需求调整
    }
  }
}

配置完成后重启Expo服务，重新构建Android应用即可生效。

方案2：运行时动态设置 #

若需在代码中动态修改底部手势栏背景色，可使用Expo官方提供的expo-navigation-bar库：

1. 安装依赖：

npx expo install expo-navigation-bar

2. 在组件中调用设置代码：

import * as NavigationBar from 'expo-navigation-bar';
import { useEffect } from 'react';

// 组件挂载时设置手势栏背景色
useEffect(() => {
  NavigationBar.setBackgroundColorAsync('#你的应用主背景色');
  // 可选：设置手势栏图标颜色（如浅色背景搭配深色图标）
  NavigationBar.setButtonStyleAsync('dark');
}, []);

之前方案无效的原因 #

• StatusBar组件仅控制顶部状态栏，和底部手势栏无关联，无法解决底部白边问题。
• 仅设置visible: "sticky-immersive"仅调整了手势栏的显示模式，未指定背景色，因此白边问题未得到解决。

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