如何动态更改反应原生的底部选项卡导航器颜色

Question

我想通过在应用程序屏幕内更改道具或状态来更改底部选项卡栏颜色

如果我们可以通过Redux商店会更好

这是我的选项卡导航

import {createBottomTabNavigator} from 'react-navigation-tabs';
import NotificationStack from './NotificationStack';
import SettingStack from './SettingStack';
const SupervisorTab = createBottomTabNavigator(
{
NotificationStack,
SettingStack,
},
{
resetOnBlur: true,
tabBarOptions: {
keyboardHidesTabBar: true,
activeTintColor: '#F26D21',
style: {
borderWidth: 0,
backgroundColor: '#000000', //need change this color code as per prop
borderTopColor: '#000000',
},
},
initialRouteName: 'SupervisorStack',
navigationOptions: ({navigation}) => ({
header: null,
}),
},
);
export default SupervisorTab;

Answer 1

不确定这是否有效，但请尝试使用变量来存储背景颜色的值。

另一种方法是使用正确的样式定义并更改样式类。

Answer 2

您需要通过 defaultNavigationOptions 函数将其设置为默认值

import {createBottomTabNavigator} from 'react-navigation-tabs';
import NotificationStack from './NotificationStack';
import SettingStack from './SettingStack';
const SupervisorTab = createBottomTabNavigator(
{
NotificationStack,
SettingStack,
},
{
defaultNavigationOptions: ({ navigation, screenProps }) => {
const mycolor = screenProps['mycolor'] || '#000000';
return {
tabBarOptions: {
keyboardHidesTabBar: true,
activeTintColor: '#F26D21',
style: {
borderWidth: 0,
backgroundColor: mycolor, //need change this color code as per prop
borderTopColor: '#000000',
},
},
}
},
resetOnBlur: true,
initialRouteName: 'SupervisorStack',
navigationOptions: ({navigation}) => ({
header: null,
}),
},
);
export default SupervisorTab;

然后你使用它

<SupervisorTab screenProps={{mycolor:this.state.mycolor}} />