react-native的跳转功能Navigator

时间:2022-09-18 18:59:01

  最近在学习react-native,因为工作要用这个技术做APP。他是即react之后的升级版。里面有很多的组件可以使用,但是都是基于JS之上的。我觉得rn用自己写的js封装起来还是不错的。毕竟是原声的嘛。

  今天介绍下跳转功能的使用吧!

1.首先导入这个组件

react-native的跳转功能Navigatorreact-native的跳转功能Navigator

react-native的跳转功能Navigator

2.在当我点击这个按钮的时候这个页面跳转。

react-native的跳转功能Navigator

react-native的跳转功能Navigator

3.创建一个_pressButton的函数。其中component中的DetailPage是跳转页面的页面名,params里面用于定义要传过去的参数。里面的属性名比如name可以执行定义。

react-native的跳转功能Navigator

react-native的跳转功能Navigator

4.在跳转到的页面DetailPage中在componentDidMount中写下面的代码就好了。name是从上个页面传的值。

react-native的跳转功能Navigatorreact-native的跳转功能Navigator

5.在DetailPage页面定义name的初始值:

react-native的跳转功能Navigatorreact-native的跳转功能Navigator

好了,这样的话就完成了页面的跳转了。很简单吧。这都是我看了很多文档弄出来的啊。

如果你想再跳转回去的话,那我们继续往下看:


1。在DetailPage页面中写下面代码:

react-native的跳转功能Navigator

2.

react-native的跳转功能Navigator

react-native的跳转功能Navigatorreact-native的跳转功能Navigator


OK了,这样就能跳回去了。

我这篇文章没有设么原理,但是都是个人实践,简单直入。