标签栏导航器中的图像

Question

我有一个 tabBar 导航器，我想用图像替换图标，它可以工作，但是尽管在导航选项中设置了 activeTintColor，但它在聚焦时不会改变，这是代码：

TabBarIcon 组件

export default class TabBarIcon extends React.Component {
  render() {
    return (
      <Image
       source={this.props.source}
       tintColor={this.props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
      />
    );
  }
}

tabBarNavigator 中的图标

  tabBarIcon: ({ focused, tintColor }) => (
    <Image
      focused={focused}
      source={require('/assets/images/icon.png')}
      tintColor={tintColor}
    />
  ),

Answer 1

对于图像，尝试以这种方式设置

tabBarNavigator 中的图标

tabBarIcon: ({ focused }) => {
        const image = focused
        ? require('./image/HomeActive.png')
        : require('./image/HomeInactive.png')
        return (
            <Image
                source={image}
                style={{height:36, width:24}}
            />
        )
    }

并设置activeTintColor and inactiveTintColor在tabBarOptions