Javascript tabbar navigator中的图像

我有一个tabBar navigator，我想用图像替换图标，它可以工作，但是当聚焦时activeTintColor不会改变，尽管它在navigationOptions中设置，下面是代码：

TabBarIcon组件

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

导出默认类TabBarIcon扩展React.Component{
render（）{
返回(
);
}
}

选项卡导航器中的图标

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

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

tabBarIcon:（{focused，tintColor}）=>(
),

我不确定是什么颜色或在哪里传递，它是全局变量吗？ 试试这个：

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

导出默认类TabBarIcon扩展React.Component{
onTintColor=（聚焦）=>{
如果（聚焦）{
返回颜色。tabIconSelected
} 
return Colors.tabIconDefault
}
render（）{
返回(
);
}
}

你想做什么？ 如果要使用此处描述的TintColor属性，还需要使用activeTintColor和InactiveIntColor。这适用于标签，如果要使用图像，则无需传递tintcolor，因为您将在组件中覆盖它

TabBarIcon组件

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

导出默认类TabBarIcon扩展React.Component{
render（）{
返回(
);
}
}

那很好

tabBarIcon: ({ focused, tintColor }) => (
    <Image
      focused={focused}
      source={require('/assets/images/icon.png')}
      //tintColor={tintColor} //there is no need for this
    />
  ),

tabBarIcon:（{focused，tintColor}）=>(
),

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

选项卡导航器中的图标

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

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

tabBarIcon:（{focused}）=>{
常数图像=聚焦
？需要（“./image/HomeActive.png”）
：需要（“./image/HomeInactive.png”）
返回(
)
}

---

并在

选项卡选项下设置
activeTintColor和inactiveTintColor
我不知道我是否理解您的问题