前言
在使用 React Native 应用程序开发时，实现基于路由的导航是一个常见的需求。React Native 中有一个名为 react-native-router-flux 的第三方库，但是它的 API 可以说是非常复杂的。在这种情况下，我们可以选择一个小而简单的第三方库，比如 react-router-native-button，它提供了基于路由的按钮，并且在使用时非常容易。
安装
在终端中使用以下命令安装 react-router-native-button：
npm install react-router-native-button --save
使用
使用 react-router-native-button 创建基于路由的按钮非常简单，只需按照以下步骤进行操作：
- 导入所需组件和模块：
import React from 'react';
import { View, Text } from 'react-native';
import { Route } from 'react-router-native';
import Button from 'react-router-native-button';- 创建一个
Home组件，将其包装在一个Route内，以便我们可以将其添加到NativeRouter中：
-- -------------------- ---- -------
----- ---- - -- -- -
----- -------- ----- -- ----------- --------- --------------- -------- ---
-----------------
-------
--
----- --- - -- -- -
--------------
----- -------- ----- - ---
------ ----- -------- ---------------- --
-------
---------------
--- 使用
Button组件来创建LinkButton，并将其添加到Home组件中：
-- -------------------- ---- -------
----- ---------- - ------------
----- ---- - -- -- -
----- -------- ----- -- ----------- --------- --------------- -------- ---
-----------------
----------- ------------
------------------
-------------
-------
--- 创建另一个组件
About，并将其添加到NativeRouter中：
-- -------------------- ---- -------
----- ----- - -- -- -
----- -------- ----- -- ----------- --------- --------------- -------- ---
------------------
-------
--
----- --- - -- -- -
--------------
----- -------- ----- - ---
------ ----- -------- ---------------- --
------ ------------- ----------------- --
-------
---------------
--- 运行应用程序，并尝试点击
Home组件中的LinkButton按钮，您将在页面上看到一个About组件。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
------ - ------ ------------ - ---- ----------------------
------ ------ ---- -----------------------------
----- ---------- - ------------
----- ---- - -- -- -
----- -------- ----- -- ----------- --------- --------------- -------- ---
-----------------
----------- ------------
------------------
-------------
-------
--
----- ----- - -- -- -
----- -------- ----- -- ----------- --------- --------------- -------- ---
------------------
-------
--
----- --- - -- -- -
--------------
----- -------- ----- - ---
------ ----- -------- ---------------- --
------ ------------- ----------------- --
-------
---------------
--
------ ------- ----结论
react-router-native-button 是一个基于路由的按钮库，它简单易用，并具有一些非常有用的功能。它可以为你的 React Native 应用程序提供一种简单的基于路由的导航方式。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005642d81e8991b448e159b