Изображения в навигаторе с вкладками

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

Что вы пытаетесь сделать?Если вы хотите использовать описанный здесь параметр TintColor https://reactnavigation.org/docs/en/bottom-tab-navigator.html, вам также необходимо использовать 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 2

Для изображения попробуйте настроить его таким образом

Значок на вкладке BarNavigator

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 3

Я не уверен, что такое Цвета или где он передается, это глобальная переменная?попробуйте это:

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