React Navigation 是 React Native 中最流行、最全面的导航库之一。react-navigation-tabs 是 React Navigation 的一个官方扩展包，该扩展包提供了一个 Tab 导航栏屏幕以及一个可自定义选项卡外观的选项卡栏。
在本文中，我们将探讨如何使用 react-navigation-tabs 包来构建 React Native 应用程序中的选项卡界面。
安装 react-navigation-tabs
我们可以使用 npm 包管理器来安装 react-navigation-tabs。
npm install react-navigation-tabs @react-native-community/masked-view
react-navigation-tabs 依赖 @react-navigation/native 和 @react-native-community/masked-view。我们必须将它们作为 peer dependencies 安装。
npm install @react-navigation/native @react-native-community/masked-view
配置
在使用 react-navigation-tabs 包之前，我们应该首先配置它。
在根界面上添加 TabNavigator：
-- -------------------- ---- ------- ------ - ------------------------ - ---- ------------------------ ------ -------- ---- -------------- ------ ----------- ---- ----------------- ----- ------------ - -------------------------- ----- --------- -------- ------------ --- ------ ------- ---------------------------------展开代码
在这个例子中，我们定义了两个选项卡（Home 和 Profile），并将它们分配到相应的屏幕组件。createBottomTabNavigator 函数创建一个 TabNavigator。接下来，我们导出一个 AppContainer，它是 react-navigation 包的另一个组件，它管理整个应用程序的导航状态。
我们还需要将 AppContainer 渲染到我们的应用程序中：
import { createAppContainer } from 'react-navigation'; import TabNavigator from './tab-navigator'; export default createAppContainer(TabNavigator);
现在，我们已经成功地将 react-navigation-tabs 安装和配置到我们的应用程序中了。
屏幕选项卡
现在，我们将创建一些屏幕选项卡。每个屏幕选项卡都是一个 React 组件。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- ---- - ---- --------------- ------ ------- ----- -------- ------- --------------- - -------- - ------ - ------ ------------- -- ---- -------------- ------- -- - -展开代码
我们只需要渲染一个简单的文本视图，以验证我们的选项卡是否能够在我们的应用程序中正常工作。
自定义选项卡外观
接下来，我们将自定义选项卡的外观。首先，我们将定义一个主题。
-- -------------------- ---- ------- ------ - ------------ - ---- --------------------- ----- ----- - - ---------------- ------- - ----------------------- -------- ---------- -- --展开代码
在这个例子中，我们从 react-native-paper 包导入了 DefaultTheme，并将它的颜色属性重写为自己的颜色。这个主题将应用于所有选项卡。
接下来，我们将在选项卡的 navigator 中引用这个主题。
-- -------------------- ---- ------- ------ - ------------------------ - ---- ------------------------ ------ - ------------- -------- -- ------------- - ---- --------------------- ------ -------- ---- -------------- ------ ----------- ---- ----------------- ----- ----- - - ---------------- ------- - ----------------------- -------- ---------- -- -- ----- ------------ - ------------------------- - ----- --------- -------- ------------ -- - -------------- - ---------------- ---------- ------------------ ------- -- ---------------- ------- -- - ----------------- ---------- -------- ----------- -- -------------- - -- ------------- -- -- - -- ------ ------- ---------------------------------展开代码
在这个例子中，我们使用属性 tabBarComponent 告诉 react-navigation-tabs 使用 react-native-paper 包中的 BottomNavigation 来渲染选项卡栏。
除此之外，我们还使用 useState 和 changeTheme 函数来动态更改主题。
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - ---- - ---- --------------- ------ - ------- ------------- -------- -- ------------- - ---- --------------------- ------ ------------- ---- ---------------------------------- ----- --- - -- -- - ----- ------- --------- - ---------- ---------------- ------- - ----------------------- -------- ---------- -- --- ----- ----------- - -- -- - ----- -------- - - ---------------- ------- - ----------------------- -------- ---------- -- -- ------------------- -- ------ - -------------- -------------- --------------- --------------- ------------ ---------- ---- -------- -- -------------- -------------- --------------------- -- ---------------- ----- -------- ----- - --- -------------- -- ------- ---------------- -- -- ------ ------- ----展开代码
结论
React Navigation Tabs 是 React Native 中最流行、最全面的导航库之一。使用 react-navigation-tabs 包可以非常容易地创建 Tab 导航栏屏幕以及自定义选项卡外观的选项卡栏。本文提供了详细的指导，希望能够帮助开发者们快速上手使用这个包来构建可靠的 React Native 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2e93c23b0ab45f74a8bc48
