前言
在开发前端项目时，路由是不可避免的一个问题。对于 React Native 开发者来说，@react-navigation 库可以帮助我们轻松地实现导航功能，并且支持 Web、IOS、Android 均可。
本文将详细介绍 @react-navigation/bottom-tabs 这个 npm 包的使用，希望能为大家提供些许帮助。
安装
安装 @react-navigation/bottom-tabs 前，要先安装 react-navigation 和 react-native-reanimated，如果你之前已经安装这两个库，可跳过此步骤。
npm install @react-navigation/native npm install -g react-native-reanimated
安装 @react-navigation/bottom-tabs。
npm install @react-navigation/bottom-tabs
因为该包依赖了 react-navigation-stack，需要进行额外安装。
npm install react-navigation-stack
使用
在你的应用程序之后，要确保已经初始化了 react-navigation。
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - ------------------- - ---- ---------------------------
------ ------- -------- ----- -
------ -
---------------------
--- -------- ---
----------------------
--
-下面我们来实现一个底部导航。
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - ------------------------ - ---- --------------------------------
------ - ------------------- - ---- ---------------------------
-------- ------------ -
------ -
----- -------- ----- -- --------------- --------- ----------- -------- ---
------------------
-------
--
-
-------- ---------------- -
------ -
----- -------- ----- -- --------------- --------- ----------- -------- ---
----------------------
-------
--
-
----- --- - ---------------------------
------ ------- -------- ----- -
------ -
---------------------
---------------
----------- ----------- ---------------------- --
----------- --------------- -------------------------- --
----------------
----------------------
--
-执行 npm start 并在模拟器或真机上运行，你将看到一个漂亮的底部导航！
修改样式
以我们的示例为例，可能想要修改底部标签栏的高度以及选中的标签项的颜色。这里提供两种方法，一种是修改全局样式，另一种是局部修改。
全局样式
在我们的 App.js 中添加一个全局样式。
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - ----- ----- ---------- - ---- ---------------
------ - ------------------------ - ---- --------------------------------
------ - -------------------- ------------ - ---- ---------------------------
-- ----------------
----- ------- - -
----------------
------- -
-----------------------
----- --------------
----------- --------
--
-- --------
-- -------------- ---------------
-- - ------------- - ----------- -
-- -----------
-------------------- ---
--
-------- ------------ -
------ -
----- -------- ----- -- --------------- --------- ----------- -------- ---
------------------
-------
--
-
-------- ---------------- -
------ -
----- -------- ----- -- --------------- --------- ----------- -------- ---
----------------------
-------
--
-
----- --- - ---------------------------
------ ------- -------- ----- -
------ -
-------------------- ----------------
---------------
----------- ----------- ---------------------- --
----------- --------------- -------------------------- --
----------------
----------------------
--
-局部样式
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - ----- ----- ---------- - ---- ---------------
------ - ------------------------ - ---- --------------------------------
------ - ------------------- - ---- ---------------------------
-------- ------------ -
------ -
----- -------- ----- -- --------------- --------- ----------- -------- ---
------------------
-------
--
-
-------- ---------------- -
------ -
----- -------- ----- -- --------------- --------- ----------- -------- ---
----------------------
-------
--
-
----- --- - ---------------------------
------ ------- -------- ----- -
------ -
---------------------
--------------
----------------
---------------- ---------
------------------ -------
------ -
-- --- ----- ----------
------ ---
--------------- -------------------------
---------------- ----------
--
--
-
----------- ----------- ---------------------- --
----------- --------------- -------------------------- --
----------------
----------------------
--
-总结
本文主要介绍了 React Native 应用中使用 @react-navigation/bottom-tabs 实现底部导航的方法，包括安装、使用以及样式的修改。希望读者在开发中可以参考本文，提高项目开发效率，同时也欢迎读者批评指正。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2e93c13b0ab45f74a8bc45