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

【问题标题】：React-Native: Bottom Tab Navigator: 'tabBarOptions' is deprecated. Migrate the options to 'screenOptions' insteadReact-Native：底部选项卡导航器：\'tabBarOptions\' 已弃用。将选项迁移到 \'screenOptions\'
【发布时间】：2022-11-11 08:54:55
【问题描述】：

我正在使用 React Native 开发一个移动应用程序，并在其中使用 Tab.Navigator - Tab.Screen 组件。在导航器中，我使用初始路由名称,选项卡栏选项，和屏幕选项特性。其他属性中一切正常，直到 javaScript 找到屏幕选项.然后它给了我警报：

// 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}/>
); }

我仍然有同样的问题。我应该怎么做才能修复它？我应该忽略它，因为它不会间接影响应用程序的性能吗？为什么会这样？

【问题讨论】：

请发布整个代码 sn-p 即您的导航器设置和相关的选项卡屏幕。
我刚刚用与我相关的所有内容更新了帖子。知道为什么会这样吗？

标签： react-native react-native-tabnavigator

【解决方案1】：

将 tabBarOptions 中的选项改为 screenOptions ，如下所示：

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

它给出这个警告是因为 tabBarOptions 在 React Navigation v6.x 中已被弃用

【讨论】：

另外，我们为什么不为screenOptions 函数取一个不同的名称。喜欢screenIconColor = (route, color) => { ... } 或避免混淆的东西

【解决方案2】：

看起来已经声明弃用了 4 年，但警告并没有停止。任何人都知道效果何时会是永久性的，并且任何情况下 tabaroptions 都不会适用于 screenops

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。