Блог

Я работаю над приложением, и в нем есть три экрана в навигаторе нижней вкладки. Когда я перехожу с одного экрана на другой экран, я смог изменить цвет метки, однако я не смог также изменить цвет значка. Вот пример того, как это выглядит до сих пор.

Вот мой App.js код, в котором я это контролирую. Я был бы очень признателен за любую помощь или указания по этому поводу. Заранее спасибо за любую помощь!

App.js:

 function MainTabNavigator() {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#e64951',
      }}
    >
      <Tab.Screen options={{
        headerShown: false, tabBarIcon: ({ tintColor }) => (
          <Entypo name="home" size={30} color={tintColor} />
        )
      }} name="home" component={Home} />
      <Tab.Screen options={{
        headerShown: false, tabBarIcon: () => (
          <FontAwesome5 name="plus" size={30} color="black" />
        )
      }} name="Add Friends" component={AddFriends} />
      <Tab.Screen options={{
        headerShown: false, tabBarIcon: ({ tintColor }) => (
          <FontAwesome name="user" size={30} color={tintColor} />
        )
      }} name="Profile" component={Profile} />
    </Tab.Navigator>
  )
}
 

Вы передаете неправильный аргумент в tabBarIcon prop. Вы должны передать color вместо tintColor .

 tabBarIcon: ({ color }) => (
    <Entypo name="home" size={30} color={color} />
)