React Native Android应用底部导航栏颜色自定义问题求助

一、如果是自定义Tab栏（React Navigation Bottom Tabs） #

确保在 Tab.Navigator 的 screenOptions 中明确设置样式，适配Android端默认布局差异：

import { Platform } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarStyle: {
          backgroundColor: '#2c3e50', // 自定义背景色
          height: Platform.OS === 'android' ? 62 : 58, // 适配Android高度
          paddingBottom: Platform.OS === 'android' ? 2 : 0,
        },
        tabBarActiveTintColor: '#ffffff',
        tabBarInactiveTintColor: '#bdc3c7',
      }}
    >
      {/* 你的Tab页面组件 */}
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

二、如果是系统底部虚拟导航栏 #

1. 静态设置（全局生效） #

修改Android原生配置文件：

• 打开 android/app/src/main/res/values/styles.xml，在 AppTheme 节点添加属性：

<item name="android:navigationBarColor">@color/custom_nav_bar_color</item>

• 打开 android/app/src/main/res/values/colors.xml，添加自定义颜色：

<color name="custom_nav_bar_color">#2c3e50</color>

修改后重新编译Android项目即可生效。

2. 动态设置（页面级切换） #

方式一：调用原生模块（无依赖）

首先创建Android原生模块：

// android/app/src/main/java/com/your_app_package/NavigationBarModule.java
package com.your_app_package;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import android.graphics.Color;
import android.view.Window;

public class NavigationBarModule extends ReactContextBaseJavaModule {
    public NavigationBarModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "NavigationBarModule";
    }

    @ReactMethod
    public void setColor(String hexColor) {
        Window window = getCurrentActivity().getWindow();
        if (window != null) {
            window.setNavigationBarColor(Color.parseColor(hexColor));
        }
    }
}

然后在 MainApplication.java 中注册模块：

// android/app/src/main/java/com/your_app_package/MainApplication.java
import com.your_app_package.NavigationBarModule;
import com.facebook.react.ReactPackage;
import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {
    // ... 其他原有代码
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.asList(
            new MainReactPackage(),
            new NavigationBarModule() // 注册自定义模块
        );
    }
}

在React Native端调用：

import { NativeModules } from 'react-native';

// 在需要修改的页面或事件中调用
NativeModules.NavigationBarModule.setColor('#2c3e50');

方式二：使用第三方库

安装 react-native-navigation-bar-color 简化操作：

npm install react-native-navigation-bar-color --save

在代码中调用：

import { setNavigationBarColor } from 'react-native-navigation-bar-color';

// 设置导航栏颜色，第二个参数控制是否显示深色图标
setNavigationBarColor('#2c3e50', true)
  .then(() => console.log('导航栏颜色设置成功'))
  .catch(err => console.error(err));

注：该库仅支持Android API 21+（Android 5.0及以上）。

内容的提问来源于stack exchange，提问作者Le Van Quang