0

此问题类似,但我也想更改图标的颜色- 而不仅仅是文本。

这是有问题的代码:

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarOptions: {
    activeTintColor: '#6CC7BD',
    inactiveTintColor: '#CCCCCC',
  },
  tabBarIcon: ({focused}) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }
    />
  )
}

根据Github 上的这个帖子,我应该试试这个:

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarOptions: {
    activeTintColor: '#6CC7BD',
    inactiveTintColor: '#CCCCCC',
  },

  tabBarIcon: ({focused}) => <TabBarIcon name={
    Platform.OS === 'ios'
      ? `ios-information-circle${focused ? '' : '-outline'}`
      : 'md-information-circle'
  } color={this.activeTintColor}/>
}

但是信息圈还是灰色的: 在此处输入图像描述

也试过color={this.tabBarOptions.activeTintColor}了,导致错误:

在此处输入图像描述

还有其他建议吗?

编辑- 也尝试过:

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarOptions: {
    activeTintColor: '#6CC7BD',
    inactiveTintColor: '#CCCCCC',
  },
  tabBarIcon: ({activeTintColor}) => (
    <TabBarIcon
      activeTintColor={activeTintColor}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${activeTintColor ? '' : '-outline'}`
          : 'md-information-circle'
      }
      color={this.activeTintColor}
    />
  )
}
4

1 回答 1

2

您是否尝试添加所有道具:

tabBarIcon: ({focused, ...restProps}) => (
    <TabBarIcon
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${activeTintColor ? '' : '-outline'}`
          : 'md-information-circle'
      }
      focused={focused}
      {...restProps}
    />
  )
于 2019-11-28T12:54:32.123 回答