react-native-mobx-navigation 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

在 React Native 程序开发中，我们通常需要使用到导航跳转功能，如实现页面跳转、传递参数、返回等功能。相信大家都熟悉 React Native 自带的导航库 react-navigation。但是，在使用 react-navigation 库时，我们常常需要写很多重复的代码。有没有更好的替代方案呢？本篇文章将介绍一款基于 react-navigation 的导航库 react-native-mobx-navigation。相比于原生 react-navigation 库，它更加简洁、易用，并且能够很好地与 Mobx 数据管理库配合使用。

安装

为了使用 react-native-mobx-navigation，我们需要先安装依赖：

npm install react-navigation mobx mobx-react react-native-mobx-navigation --save

快速使用

-- -------------------- ---- -------
------ ---------------- --------- ---- -------------------------------
------ ---------- ----------- ---- ----------

---
 - ----
 --
----- ------ - -
  ----- -------- ----------
  ------- -------- ------------
--

---
 - -----
 --
----- --------- - ---------------------- -
  ----------------- ------- -- ----
---

---
 - -----
 --
---------
----- --- ------- --------------- -
  -------- -
    ------ -
      ---------- --
    --
  -
-

------ ------- ----

上面的代码将创建一个导航器，其中包含两个页面 HomePage 和 DetailPage。在根组件中，我们将导航器作为根组件进行渲染即可。下面我们来看具体的使用方法。

页面跳转

我们可以使用 this.props.navigation.navigate(routeName, params) 方法进行页面跳转，其中 routeName 表示想要跳转到的页面名，params 表示要传递的参数，如下所示：

-- -------------------- ---- -------
----- -------- ------- --------------- -
  -------- -
    ------ -
      ------
        ----- ----------- -- ---------------------------------------- ---- --------------------
      -------
    --
  -
-

----- ---------- ------- --------------- -
  -------- -
    ----- ---- - -----------------------------------
    ------ -
      ------
        -------------------------
      -------
    --
  -
-

在 HomePage 中，我们在一个文本中设置了一个点击事件，当点击时，使用 this.props.navigation.navigate('Detail', {id: 123}) 实现了页面跳转，同时传递了参数 {id: 123}。在 DetailPage 中，我们通过 this.props.navigation.state.params 获取所传递的参数。

我们可以使用 this.props.navigation.goBack() 实现页面返回功能，如下所示：

-- -------------------- ---- -------
----- ---------- ------- --------------- -
  -------- -
    ------ -
      ------
        ----- ----------- -- -----------------------------------------
      -------
    --
  -
-

在上面的代码中，我们在一个文本中设置了一个点击事件，当点击时，使用 this.props.navigation.goBack() 实现了页面返回。

react-native-mobx-navigation 使用教程

简介

安装

快速使用

页面跳转

返回

相关资源

纠错反馈