React Native中如何修改导航栏颜色？Android底部系统导航栏在官方文档中的称谓是什么？

嘿，这两个问题我刚好有经验，来给你详细解答下：

一、如何修改React Native中的导航栏颜色 #

这里要分两种常见的“导航栏”场景，你可以根据自己的需求对应操作：

1. 修改React Navigation的顶部导航栏颜色 #

如果你用的是React Navigation（目前React Native生态里最主流的导航库），以v6版本为例，全局或者单个页面的导航栏颜色都可以通过配置screenOptions来实现：

全局设置（所有页面生效）

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: '#2196F3', // 替换成你想要的导航栏背景色
        },
        headerTintColor: '#fff', // 导航栏文字、图标的颜色，这里设为浅色适配深色背景
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

单个页面单独设置

如果只想给某一个页面的导航栏换颜色，直接在对应Screen的options里配置即可：

<Stack.Screen
  name="Settings"
  component={SettingsScreen}
  options={{
    headerStyle: { backgroundColor: '#f4511e' },
    headerTintColor: '#fff',
  }}
/>

2. 修改Android系统级的导航栏（顶部状态栏+底部系统导航栏） #

如果要改的是Android系统自带的顶部状态栏，或者你之前问的底部系统导航栏，操作方式如下：

顶部状态栏（React Native内置支持）

直接用React Native提供的StatusBar组件就能动态设置：

import { StatusBar, useEffect } from 'react-native';

function HomeScreen() {
  useEffect(() => {
    // 设置状态栏背景色
    StatusBar.setBackgroundColor('#2196F3');
    // 设置状态栏文字为浅色（适配深色背景），可选'default'（深色）或'light-content'（浅色）
    StatusBar.setBarStyle('light-content');
  }, []);

  return (
    {/* 你的页面内容 */}
  );
}

底部系统导航栏（需要原生配置或自定义模块）

React Native没有内置直接修改底部系统导航栏的API，有两种常用方案：

• 方案一：Android原生静态配置
  打开android/app/src/main/res/values/styles.xml，修改AppTheme的配置：

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 设置底部导航栏背景色 -->
    <item name="android:navigationBarColor">#2196F3</item>
    <!-- 设置导航栏图标颜色：false为浅色，true为深色 -->
    <item name="android:windowLightNavigationBar">false</item>
  </style>
  

  这种方式是全局生效的，打包后就固定了。

• 方案二：React Native动态修改
  如果你需要在运行时动态切换颜色，可以自己写个简单的原生模块，然后在RN端调用：
  首先在Android原生端创建一个模块（Java代码）：

  package com.your_app_package_name;
  
  import com.facebook.react.bridge.ReactApplicationContext;
  import com.facebook.react.bridge.ReactContextBaseJavaModule;
  import com.facebook.react.bridge.ReactMethod;
  import android.view.Window;
  import android.graphics.Color;
  
  public class NavigationBarModule extends ReactContextBaseJavaModule {
    public NavigationBarModule(ReactApplicationContext reactContext) {
      super(reactContext);
    }
  
    @Override
    public String getName() {
      return "NavigationBarModule"; // 模块名称，RN端会用到
    }
  
    @ReactMethod
    public void setNavigationBarColor(String colorHex) {
      Window window = getCurrentActivity().getWindow();
      if (window != null) {
        window.setNavigationBarColor(Color.parseColor(colorHex));
      }
    }
  }
  

  然后在RN端调用这个模块：

  import { NativeModules } from 'react-native';
  
  const { NavigationBarModule } = NativeModules;
  
  // 调用方法设置颜色，比如设置为红色
  NavigationBarModule.setNavigationBarColor('#ff0000');
  

二、Android底部导航栏的官方称谓 #

你提到的这个Android设备底部的导航栏，Google官方的标准称谓是System Navigation Bar（系统导航栏）。它就是包含返回、主页、最近任务按钮（手势导航模式下可能只显示一条横线）的那个栏，不受应用主题完全控制（部分系统可以自定义）。

之前你搜navigation bar没找到相关内容，主要是因为很多React Native的文档会把React Navigation的顶部导航栏也称为navigation bar，导致关键词混淆。加上System关键词搜索，就能精准找到Android官方文档里的对应内容啦。

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