在本机底部选项卡导航器中更改屏幕时如何更改图标和文本的颜色？

Question

我正在开发一个应用程序，它在底部选项卡导航器中有三个屏幕。当我从一个屏幕转到另一个屏幕时，我可以更改标签颜色，但是，我也无法更改图标的颜色。这是到目前为止它的样子的一个例子。

这是我的 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>
  )
}

Answer 1

您向 tabBarIcon prop 传递了错误的参数。您应该传递 color 而不是 tintColor.

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