React-Native:底部选项卡导航器: 'tabBarOptions' 已弃用。将选项迁移到 'screenOptions'

Question

我正在使用 React Native 开发一个移动应用程序，我在其中使用了 Tab.Navigator - Tab.Screen 组件。在导航器中，我使用了 initialRouteName、tabBarOptions 和 screenOptions 属性。在其他属性中一切正常，直到 javaScript 找到 screenOptions。然后它给了我警报:

// Place the following in 'screenOptions' in your code to keep current behavior:

{
   "tabBarStyle": [
    {
      "display": "flex"
    },
    null
   ]
}

参见 https://reactnavigation.org/docs/bottom-tab-navigator#options了解更多详情。

我已经在我的代码中做到了:

const App = () => {
     return (
       <>
      <NavigationContainer>
        <Tab.Navigator
          initialRouteName='ExerciseScreensStack'
          tabBarOptions={{
            tabBarActiveTintColor: '#efb810',
            tabBarInactiveTintColor: 'black'
          }}
          screenOptions = {({ route }) =>({
            tabBarStyle: [
              {
                display: "flex"
              },
              null
            ],
        tabBarIcon: ({ color }) => 
        screenOptions(route, color),

      })}
      >

这是当我在其中一个屏幕上时呈现我的图标颜色的函数:

const screenOptions = (route, color ) =>{
  let IconName;

  switch (route.name){
    case 'Home':
    IconName = "home-circle-outline"
    break;

    case "ExerciseScreensStack":
    IconName = "basketball"
    break;

    case 'RoutinesStack':
    IconName = "walk"
    break;

  }

  return(
    <Icon type='material-community' name={IconName} size={22} 
color={color}/>
); }

我仍然遇到同样的问题。我应该怎么做才能解决它？我是否应该忽略它，因为它不会间接影响应用程序的性能？为什么会这样？

Answer 1

将 tabBarOptions 中的选项放入 screenOptions 中，如下所示:

 screenOptions = {({ route }) =>({
        tabBarActiveTintColor: '#efb810',
        tabBarInactiveTintColor: 'black',
        tabBarStyle: [
          {
            display: "flex"
          },
          null
        ],
    tabBarIcon: ({ color }) => 
    screenOptions(route, color),
      
  })}

它发出此警告是因为 tabBarOptions 在 React Navigation v6.x 中已被弃用