如何动态更改反应本机BottomTabNavigator颜色

时间:2020-02-13 07:18:07

标签: react-native react-navigation

我想通过更改应用程序屏幕内的道具或状态来更改底部标签栏的颜色

如果我们可以通过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;

2 个答案:

答案 0 :(得分:0)

不确定是否可以使用,但是尝试使用变量存储背景色的值。

其他方法是使用正确的样式定义并更改样式类。

答案 1 :(得分:0)

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

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

然后使用它

IntArrayList