如何修改React Native Paper底部导航的激活态颜色？

你可以通过以下两种方式将激活标签的粉色圆形按钮改为蓝色：

方法1：自定义主题（推荐，统一风格） #

React Native Paper的组件样式基于主题系统，secondary变体的BottomNavigation激活圆形按钮颜色默认使用主题的secondary颜色。你可以通过自定义主题覆盖这个颜色：

1. 导入ThemeProvider和默认主题：

import { Provider as PaperProvider, DefaultTheme } from 'react-native-paper';

2. 创建自定义主题，替换secondary颜色为目标蓝色：

const customTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    secondary: '#2196F3', // 这里替换为你想要的蓝色值
  },
};

3. 用ThemeProvider包裹BottomNavigation组件：
   修改后的完整组件代码：

import * as React from 'react';
import { View } from 'react-native';
import { BottomNavigation, Provider as PaperProvider, DefaultTheme } from 'react-native-paper';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const customTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    secondary: '#2196F3',
  },
};

const HomePage =({route,navigation})  => {
    const [index, setIndex] = React.useState(0);
    const [routes] = React.useState([
        { key: 'home', title: 'Home', focusedIcon: 'home', unfocusedIcon : 'home-outline',  },
        { key: 'orderHistory', title: 'Order History', focusedIcon: 'clock', unfocusedIcon: 'clock-outline' },
        { key: 'profile', title: 'Profile', focusedIcon: 'account', unfocusedIcon : 'account-outline'},
        { key: 'other', title: 'Other', focusedIcon: 'dots-horizontal-circle', unfocusedIcon: 'dots-horizontal-circle-outline' },
    ]);
    const renderScene = BottomNavigation.SceneMap({
        profile: ProfileBase,
        home: HomeBase,
        orderHistory: OrderHistoryBase,
        other: OtherBase,
    });

    return (
        <PaperProvider theme={customTheme}>
            <View style={{backgroundColor: "white", height: '100%'}}>
                <BottomNavigation
                    shifting={false}
                    variant='secondary'
                    navigationState={{ index, routes }}
                    onIndexChange={setIndex}
                    renderScene={renderScene}
                    barStyle={{backgroundColor:'white'}}
                />
            </View>
        </PaperProvider>
    );
}

export default HomePage;

方法2：直接设置activeColor属性 #

如果仅需局部修改激活状态的颜色，可以直接给BottomNavigation添加activeColor属性，该属性会同时修改激活图标的颜色和圆形按钮的背景色：

<BottomNavigation
    shifting={false}
    variant='secondary'
    navigationState={{ index, routes }}
    onIndexChange={setIndex}
    renderScene={renderScene}
    barStyle={{backgroundColor:'white'}}
    activeColor="#2196F3" // 替换为目标蓝色
/>

注：不同版本的react-native-paper可能存在属性行为差异，如果activeColor未生效，优先使用主题自定义的方式。

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