如何使用本机反应更改标签栏中图标的色调颜色

Question

我是本机反应的新手，并且有一个带有图标和文本的标签栏。 我希望每个图标在活动时改变颜色，但似乎无法让它工作。

这是我的代码。

 const TabNavigator = createBottomTabNavigator({ Home: { screen: HomeScreen, navigationOptions: ({tintColor}) => ({ title: 'Home', tabBarIcon: <Icon name={Platform.OS === 'ios' ? 'ios-home' : 'md-home'} size={25} color={tintColor} />, }), }, Listen: { screen: MainScreen, navigationOptions: ({tintColor}) => ({ title: 'Listen', tabBarIcon: <FontAwesome name="microphone" size={25} color={tintColor} />, }), }, Events: { screen: EventScreen, navigationOptions: ({tintColor}) => ({ title: 'Events', tabBarIcon: <Icon name={Platform.OS === 'ios' ? 'ios-calendar' : 'md-calendar'} size={25} color={tintColor} />, }), }, About: { screen: AboutScreen, navigationOptions: ({tintColor}) => ({ title: 'About', tabBarIcon: <Icon name={Platform.OS === 'ios' ? 'ios-information-circle-outline' : 'md-information-circle-outline'} size={25} color={tintColor} />, }), } }, { initialRouteName: 'Home', tabBarOptions: { labelPosition: 'below-icon', activeTintColor: '#E8AA65', inactiveTintColor: '#58585A', fontSize: 50, style: { height: 50, backgroundColor: '#3B3B3B', } }, });

我试图将色调颜色传递给像这样 color={tintColor} 的图标，但我的图标显示为黑色并且不改变颜色。 文本颜色变化良好，但图标没有变化。

Answer 1

您可以将 color prop 传递给 Icon 组件。

Answer 2

您可以使用以下更改代码

const TabNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title:  'Home',
      tabBarIcon: ({ focused }) => (
        <Icon
          name={Platform.OS === 'ios' ? 'ios-home' : 'md-home'}
          size={25}
          color={focused ? 'white' : 'black'}
        />
      ),
    },
  },
  Listen: {
    screen: MainScreen,
    navigationOptions: {
      title:  'Listen',
      tabBarIcon: ({ focused }) => (
        <FontAwesome
          name="microphone"
          size={25}
          color={focused ? 'white' : 'black'}
        />
      ),
    },
  },
  Events: {
    screen: EventScreen,
    navigationOptions: {
      title:  'Events',
      tabBarIcon: ({ focused }) => (
        <Icon
          name={Platform.OS === 'ios' ? 'ios-calendar' : 'md-calendar'}
          size={25}
          color={focused ? 'white' : 'black'}
        />
      ),
    },
  },
  About: {
    screen: AboutScreen,
    navigationOptions: {
      title:  'About',
      tabBarIcon: ({ focused }) => (
        <Icon
          name={Platform.OS === 'ios' ? 'ios-information-circle-outline' : 'md-information-circle-outline'}
          size={25}
          color={focused ? 'white' : 'black'}
        />
      ),
    },
  }
},
{
  initialRouteName: 'Home',
  tabBarOptions: {
      labelPosition: 'below-icon',
      activeTintColor: '#E8AA65',
      inactiveTintColor: '#58585A',
      fontSize: 50,
      style: {
        height: 50,
        backgroundColor: '#3B3B3B',
       }
    },
  });

Answer 3

你可以试试这个：使用tabInfo.tintColor

 Events: { 
    screen: EventScreen,
    navigationOptions: ({tabInfo}) => ({
      title:  'Events',
      tabBarIcon: <Icon name={Platform.OS === 'ios' ? 'ios-calendar' : 'md-calendar'} size={25}
      color={tabInfo.tintColor} />,
    }),
  },