选项卡栏导航器中的图像

Question

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

选项卡栏图标组件

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

选项卡栏导航器中的图标

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

Answer 1

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

选项卡栏导航器中的图标

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

Answer 2

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

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)
       }/>
    );
  }
}

Answer 3

你想做什么？如果要使用此处描述的 TintColor ptoperty https://reactnavigation.org/docs/en/bottom-tab-navigator.html，您还需要使用 activeTintColor 和 inactiveTintColor 。这适用于标签，如果您想使用图像，则无需传递色调，因为您要在组件中覆盖它

选项卡栏图标组件

    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: ({ focused, tintColor }) => (
    <Image
      focused={focused}
      source={require('/assets/images/icon.png')}
      //tintColor={tintColor} //there is no need for this
    />
  ),