Question

我有一个tabBar导航器，我想用图像替换图标，它可以正常工作，但是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}
      />
    );
  }
}

tabBarNavigator中的图标

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

Answer 1

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

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 2

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

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

Answer 3

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

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

标签栏导航器中的图像

3 个答案: