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 中已被棄用

Answer 2

看起來已經聲明棄用了 4 年，但警告並沒有停止。 任何人都知道效果何時會是永久性的，並且任何情況下 tabaroptions 都不會適用於 screenops