[英]How to change react native paper bottom navigation active color?
我想更改 react-native-paper 导航的颜色。 我怎样才能改变颜色。 我可以更改背景颜色但无法更改活动选项卡圆形按钮的颜色。
图片链接 = https://i.imgur.com/1C9FRMe.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' }}
在 React Native Paper 主题 object 中,只需更改secondaryContainer颜色
const theme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
primary: "#3498db",
secondary: "#f1c40f",
secondaryContainer: "red",
},
};
您必须通过主题道具在组件中本地覆盖 secondaryContainer 颜色: https://github.com/callstack/react-native-paper/issues/3248
<BottomNavigation
...
theme={{colors: {secondaryContainer: 'yellow'}}}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.