BottomTabNavigator динамически меняет цвет значка в функциональном компоненте с реагирующей навигацией

Question

Я пытался изменить цвет значка, когда пользователь нажимает на другую иконку bottomtabnavigator. Мне удалось изменить цвет фона и цвет ярлыка, но не значок, любая помощь приветствуется.

Mainflow:createBottomTabNavigator({

    Home:{
       screen:Main,
       navigationOptions:{  
        tabBarLabel:'Blood',  
        tabBarIcon:({tintColor})=>(  
            <MaterialCommunityIcons name="drink" color="white" size={30}></MaterialCommunityIcons>
        )  
      } 

    },

    Chart:{
    screen:History,

       navigationOptions:{  
        tabBarLabel:'History',  
        tabBarIcon:({tintColor})=>(  
            <MaterialCommunityIcons name="chart-bar" color="white" size={30}></MaterialCommunityIcons>
        )  
      },
      tabBarOptions:{
        activeTintColor:"blue"
      } 

    },



    Options:{
      screen:History,
         navigationOptions:{ 

          tabBarLabel:'Options',  
          tabBarIcon:({tintColor})=>(  
              <MaterialIcons name="person" color="white" size={30}></MaterialIcons>
          )  
        } 

      }

    },

Это мой навигатор, я меняю цвет метки с помощью navigationOptions внутри функционального компонента, вот так

History.navigationOptions = function ({ navigation }) { 
return {

    tabBarIcon:<MaterialCommunityIcons name="food-fork-drink" color="black" size={30}></MaterialCommunityIcons>,


    tabBarOptions: {
      tabBarIcon:<MaterialCommunityIcons name="food-fork-drink" color="black" size={30}></MaterialCommunityIcons>,

      tabBarLabel:"cambio",
       showIcon:true,
      activeTintColor: '#0082FB',
      adaptive:true,
      labelPosition:"below-icon",
      iconStyle:{
        color:"blue"
      },
      labelStyle: {
        color:"blue",
        fontSize: 15,
        fontWeight:"bold",

      },
      style: {
        color:"blue",
        backgroundColor: '#0082FB',      
        height:height*0.10,
        position:"absolute",        
        borderTopColor: "transparent"
      },


  },


  }
}

Answer 1

Если вы пытаетесь изменить цвет значка, вы можете архивировать через tintColor реквизит.

const BottomTab = createBottomTabNavigator({
    Home:{
       screen:Main,
       navigationOptions:{  
        tabBarLabel:'Blood',  
        tabBarIcon:({tintColor})=>(  
            <MaterialCommunityIcons name="drink" color={tintColor} size={30}></MaterialCommunityIcons>
        )
      }
    },

    Chart:{
      screen:History,
      navigationOptions:{  
        tabBarLabel:'History',  
        tabBarIcon:({tintColor})=>(  
            <MaterialCommunityIcons name="chart-bar" color={tintColor} size={30}></MaterialCommunityIcons>
        )  
      }
    },
    Options:{
      screen:History,
       navigationOptions:{ 
        tabBarLabel:'Options',  
        tabBarIcon:({tintColor})=>(  
            <MaterialIcons name="person" color="white" size={30}></MaterialIcons>
        )  
      } 
    }
  },
  {
    tabBarOptions: {
      activeTintColor: 'white', // --> active icon color
      inactiveTintColor: 'black', // --> inactive icon color
    }
  }
)