React Native是一款基于Javascript的移动端框架，它让你可以使用React的语法开发原生的iOS和Android应用程序。在React Native开发中，路由是非常重要的一个概念。因此，react-native-router-flux-cyq这个npm包就应运而生，它可以帮助开发者更好的管理和导航React Native应用程序的路由。
安装
我们可以使用npm来安装react-native-router-flux-cyq：
npm install react-native-router-flux-cyq --save
使用
在安装完npm包后，在React Native项目中使用react-native-router-flux-cyq只需要引入Router组件即可：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- -------------------------------
----- --- - -- -- -
------ -
--------
------ -----------
------ ---------- ---------------------- ------------ ------- --
------ ------------ ------------------------ -------------- --
--------
---------
--
-在这里我们定义了两个Scene：home和detail。其中，home是默认打开的页面，因为它被标记为key="home"和initial。
Scene之间切换
react-native-router-flux-cyq提供了一些方法来切换不同的场景。例如，在home页面中添加一个按钮用于跳转到detail页面：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- -------------------------------
----- ---------- - -- -- -
------ -
------- --------- -- ------- ----------- -- ----------------- --
--
-
----- ------------ - -- -- -
------ -
------------ -------------
--
-
----- --- - -- -- -
------ -
--------
------ -----------
------ ---------- ---------------------- ------------ ------- --
------ ------------ ------------------------ -------------- --
--------
---------
--
-在这里，我们引入了一个Actions对象，通过Actions.detail()来切换到detail页面。
传递参数
在场景之间切换时，有时我们需要传递一些参数。例如，我们希望在home页面中点击按钮时传递一个字符串到detail页面：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- -------------------------------
----- ---------- - -- -- -
------ -
------- --------- -- ------- ----------- -- ---------------- -------- ------- --- --
--
-
----- ------------ - -- ------- -- -- -
------ -
----------------------
--
-
----- --- - -- -- -
------ -
--------
------ -----------
------ ---------- ---------------------- ------------ ------- --
------ ------------ ------------------------ -------------- --
--------
---------
--
-在上面的例子中，我们在传递参数时使用了一个名为myParam的属性，详情可见{ myParam: 'hello' }。
在接收参数时，我们可以通过在DetailScreen组件中添加props来获取这个参数myParam，在这里通过解构赋值的方式将myParam从props中提取出来。
带有TabBar的场景
如果你需要在React Native应用程序中使用TabBar，react-native-router-flux-cyq也能够很方便的实现这个功能。我们只需要将Scene组件替换为Tabs组件就可以了：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------ ---- - ---- -------------------------------
----- ---------- - -- -- -
------ -
---------- -------------
--
-
----- ------------ - -- -- -
------ -
------------ -------------
--
-
----- ------- - -- --------- ----- -- -- -
------ -
----- -------- ------ -------- - ----- - ------- -----------------
--
-
----- --- - -- -- -
------ -
--------
----- -----------
------ ---------- ---------------------- ------------ -------------- ------- --
------ ------------ ------------------------ -------------- -------------- --
-------
---------
--
-在这个例子中，我们定义了两个Tab，每个Tab都是一个Scene。我们还定义了一个名为TabIcon的组件，用来显示每个Tab。
结论
在这篇文章中，我们介绍了如何使用react-native-router-flux-cyq来管理和导航React Native应用程序的路由。我们学习了如何在不同场景之间进行导航、如何传递参数和如何与TabBar一起使用。
使用react-native-router-flux-cyq，开发者可以更加方便地实现React Native应用程序的导航功能，让应用程序变得更加用户友好。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005633881e8991b448e0f61