如何修改React Native Paper底部导航的激活标签圆形按钮颜色？

问题描述 #

已成功修改React Native Paper底部导航栏的背景色，但无法将激活标签的粉色圆形按钮改为蓝色，效果如图所示：

当前实现代码如下：

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


const Tab = createBottomTabNavigator();


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 (
        <View style={{backgroundColor: "white", height: '100%'}}>
            <BottomNavigation
                shifting={false}
                variant='secondary'
                navigationState={{ index, routes }}
                onIndexChange={setIndex}
                renderScene={renderScene}
                barStyle={{backgroundColor:'white'}}
                />
        </View>
    );
}

export default HomePage;

// activeColor="red"
// barStyle={{ backgroundColor: '#1fa9e8'  }}

解决方案 #

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

你之前注释了activeColor="red"，只需把它添加到BottomNavigation组件的props中，替换成目标蓝色值即可：

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

方法2：通过自定义Theme控制颜色 #

如果需要统一调整全局主题色，或者更灵活地控制样式，可以用React Native Paper的主题配置：

1. 先导入相关依赖：

import { DefaultTheme } from 'react-native-paper';

2. 给BottomNavigation单独设置主题，修改primary色值（secondary变体的激活按钮默认使用primary色）：

<BottomNavigation
    shifting={false}
    variant='secondary'
    navigationState={{ index, routes }}
    onIndexChange={setIndex}
    renderScene={renderScene}
    barStyle={{backgroundColor:'white'}}
    theme={{
      ...DefaultTheme,
      colors: {
        ...DefaultTheme.colors,
        primary: '#2196F3', // 设置目标蓝色
      },
    }}
/>

如果要全局生效，可以在App根组件用Provider包裹，传入自定义主题，这样所有React Native Paper组件都会使用该主题配置。

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