React-Navigation v5 无法导入底部选项卡答案

【问题标题】：React-Navigation v5 can't import bottom tabReact-Navigation v5 无法导入底部选项卡
【发布时间】：2020-08-31 09:31:38
【问题描述】：

在 React-Navigation v4 上，您可以通过 import { BottomTabBar } from 'react-navigation-tabs'; 获取 BottomTabBar，以便您自己自定义它。 v5 的等价物是什么，在文档中找不到任何内容。

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

请查看doc。

首先你必须安装bottom-tabs：

npm install @react-navigation/bottom-tabs

然后，您必须从 @react-navigation/bottom-tabs 导入 createBottomTabNavigator ：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

然后您可以创建选项卡。例如：

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

【讨论】：

我需要一个自定义标签栏。我读过文档。我的意思是import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs'; 你可以这样做并在之前导入BottomTabBar，以及在v5 中的等价物
对于自定义标签栏，有一个名为 tabBar 的道具。您必须在该道具中传递您的自定义标签栏。
是的，这是我的问题，我知道。你知道如何获取我当前的标签栏元素并添加另一个吗？基本上我需要的是我得到的默认标签栏，当我需要它时，我会在它上面添加另一个额外的视图。

【解决方案2】：

找到答案了。

您从新包中导入 import { BottomTabBar } from '@react-navigation/bottom-tabs';，但要小心，在导航中使用它时，您必须将 props 传递给它，否则会引发错误。该模式将是


<Tab.Navigator
  initialRouteName="..."
  tabBar={props => <CustomBottomTab {...props} />}
  tabBarOptions={...}>

【讨论】：