如何更改React Native Paper底部导航活动颜色？

Question

我想改变react-native-paper导航的颜色。我怎样才能改变颜色。我可以更改背景颜色，但无法更改活动选项卡圆形按钮的颜色。

图片链接 = https://i.stack.imgur.com/3Edpm.png

我想把粉红色变成蓝色我该如何改变。

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'  }}

Answer 1

在反应原生纸张主题对象中只需更改secondaryContainer颜色

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: "#3498db",
    secondary: "#f1c40f",
    secondaryContainer: "red",
  },
};

Answer 2

您必须通过 theme prop 在组件中本地覆盖 secondaryContainer 颜色： https: //github.com/callstack/react-native-paper/issues/3248

 <BottomNavigation
      ...
      theme={{colors: {secondaryContainer: 'yellow'}}}
    />