REACT NATIVE 系列教程之五NAVIGATOR(页面导航)的基本使用与传参

Posted 2022-05-28 李华明Himi

本站文章均为  李华明Himi 原创,转载务必在明显处注明： 
转载自【黑米GameDev街区】 原文链接:  http://www.himigame.com/react-native/2248.html

width="150" height="210" frameborder="0" scrolling="no" src="http://widget.weibo.com/relationship/bulkfollow.php?language=zh_cn&uids=1916000601&wide=1&color=FFFFFF,FFFFFF,0082CB,666666&showtitle=0&showinfo=1&sense=0&verified=1&count=1&refer=http%3A%2F%2Fwww.himigame.com%2Freact-native%2F2248.html&dpc=1" style="margin: 0px; padding: 0px; border-width: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; max-width: 100%;">

今天介绍一种应用开发中常用的负责页面切换及导航功能的组件：Navigator

一：Navigator

对于页面导航其实主要功能就是：每个页面都知道本身应该切换到哪个页面，并且切到的页面会记录从哪里来，如果要返回的话，知道返回到哪个页面。这一切都不需要再用逻辑管理！而且每个页面之间也可以进行参数传递，很方便的组件。废话不多说：先上示例代码：

首先我们导入 Navigator 组件：

1 2 3 4 5

import React ,    . . .    Navigator ,    . . . from 'react-native' ;

使用方式：

1 2 3 4 5 6 7 8 9 10 11 12 13

render ( )      return (          < Navigator              initialRoute = name : 'FirstPage' , component : FirstPage              configureScene = ( route ) = >                return Navigator . SceneConfigs . HorizontalSwipeJump ;                           renderScene = ( route , navigator ) = >              let Component = route . component ;              return < Component . . . route . params navigator = navigator / >                         / >    )

上面的代码，初始化了导航组件，且设置默认显示页面为 FirstPage，这里需要注意两点：

1. 我们主要关注 Navigator 里  initialRoute 中的 两个参数：

name: 组件名

component: 组件Class名

Himi导入FirstPage时如下：

1	import FirstPage from './FirstPage'

所以 name 和  component 都填写的为FirstPage

2. <Component …route.params navigator=navigator />

上面这一行是将navigator作为props进行传递

3.  Navigator.SceneConfigs.HorizontalSwipeJump

上面一行是设置页面切换之间的动画效果，更多效果查看源文件：

node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js

下面我们看下FirstPage.js :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

import React ,    AppRegistry ,    Component ,    View ,    Text ,    StyleSheet ,    TouchableHighlight , from 'react-native' ;   import SecondPage from './SecondPage' ;     class REACT NATIVE 系列教程之九REACT NATIVE版本升级步骤与注意事项！ REACT NATIVE 系列教程之九REACT NATIVE版本升级步骤与注意事项！ REACT NATIVE 系列教程之三函数绑定与FLEXBOX是用好REACT的基础 REACT NATIVE 系列教程之十二REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信 REACT NATIVE 系列教程之十一插件的安装使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR) REACT NATIVE 系列教程之十一插件的安装使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR)