react-native - 如何动态更改本机 BottomTabNavigator 颜色

Question

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

如果我们可以通过 redux store 会更好

这是我的标签导航

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;

标签： react-nativereact-navigation

Answer 1

您需要通过 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}} />