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道具进行存档。