在 React Native 的开发中，我们经常需要处理多个页面之间的跳转，这时候就需要用到 react-router-native 这个 npm 包。本文将为大家详细介绍如何使用 react-router-native，帮助大家快速上手。
什么是 react-router-native
react-router-native 是 React Native 的一个路由导航库，它通过集中式管理管理路由，使页面之间的跳转变得更加简单、灵活和高效。React Native 实现了和 React Web 的 <BrowserRouter> 和 <Link> 很类似的 <NativeRouter> 和 <Link> 组件，同时还提供了一些针对移动端的特定路由组件，如 <TabNavigator> 和 <DrawerNavigator> 等，是移动端开发中必不可少的一部分。
react-router-native 使用教程
安装
在安装前，我们需要确保已经安装了 npm。在终端中输入以下命令来安装 react-router-native：
npm install --save react-router-native
基本用法
我们先来看一个最基本的例子，它会显示一个 Home 组件，点击 Go to About 后跳转到 About 组件。
首先，创建 index.js 文件，输入以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ - ------------- ------ ---- - ---- ----------------------
----- ---- - -- -- -
----- -------- ----- -- --------------- --------- ----------- -------- ---
-----------------
----- ------------
------------------
-------- -- ------------
-------------------
-------
-------
--
----- ----- - -- -- -
----- -------- ----- -- --------------- --------- ----------- -------- ---
------------------
----- -------
------------------
-------- -- -----------
-------------------
-------
-------
--
----- --- - -- -- -
--------------
----- -------- ----- - ---
------ ----- -------- ---------------- --
------ ------------- ----------------- --
-------
---------------
--
------ ------- ----在上面的例子中，NativeRouter、Route 和 Link 都是从 react-router-native 中引入的组件。其中：
NativeRouter组件相当于 React Web 中的BrowserRouter。它接受一个View包裹，用于管理和渲染所有的路由配置。Route组件用于配置路由，它接受两个属性：path和component。path属性表示路由的路径匹配规则，component属性表示路由对应的组件。Link组件用于生成链接，它接受一个to属性，表示要跳转到的路由。可以在TouchableOpacity中嵌套<Link>组件，实现跳转。
路由传参
有时候我们需要在页面间传递参数，可以使用 Route 属性中的 render 属性来实现。
我们修改 index.js，在 Home 组件中添加一个按钮，点击后带参数跳转到 About：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ - ------------- ------ ---- - ---- ----------------------
----- ---- - -- ------- -- -- -
----- -------- ----- -- --------------- --------- ----------- -------- ---
-----------------
-----------------
----------- -- -
--------------
--------- ---------
------ - ----- ------ ------ ------- --
---
--
-
-------- -- ------------
-------------------
-------
--
----- ----- - -- -------- -- -- -
----- -------- ----- -- --------------- --------- ----------- -------- ---
------------------
-----------------------------------
----- -------
------------------
-------- -- -----------
-------------------
-------
-------
--
----- --- - -- -- -
--------------
----- -------- ----- - ---
------ ----- -------- ---------------- --
------ ------------- --------------- -- ------ ---------- --- --
-------
---------------
--
------ ------- ----这里我们在 Home 组件中使用 history.push 方法跳转到 About 组件，并将参数传递到 state 中。在 About 组件中，我们使用 location.state 获取参数。
重定向
有时候我们需要重定向到另一个路由，可以使用 <Redirect> 组件实现。
我们修改 index.js，在 Home 组件中添加一个按钮，点击后重定向到 /about：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ - ------------- ------ ----- -------- - ---- ----------------------
----- ---- - -- ------- -- -- -
----- -------- ----- -- --------------- --------- ----------- -------- ---
-----------------
-----------------
----------- -- -
-----------------------
--
-
-------- -- ------------
-------------------
--------- ------ --
-------
--
----- ----- - -- -- -
----- -------- ----- -- --------------- --------- ----------- -------- ---
------------------
----- -------
------------------
-------- -- -----------
-------------------
-------
-------
--
----- --- - -- -- -
--------------
----- -------- ----- - ---
------ ----- -------- ---------------- --
------ ------------- ----------------- --
-------
---------------
--
------ ------- ----在 Home 组件中，我们添加了一个 Redirect 组件，它会重定向到 / 路由。这里需要注意：Redirect 组件必须直接嵌套在 NativeRouter 中，不能嵌套在别的组件中。
总结
本文简单介绍了 react-router-native 的基本用法，包括路由配置、路由传参和重定向等内容。通过学习，我们已经可以利用 react-router-native 在 React Native 中实现路由导航，从而更加高效地进行移动端开发。
当然，在实际开发过程中，react-router-native 还有很多高级用法和 API，感兴趣的读者可以深入学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa72b5cbfe1ea06104be