React Native之Navigator
移动应用很少只包含一个页面。从你添加第二个页面开始,就得考虑如何管理多个页面间的跳转了。
导航器正是为此而生。它可以管理多个页面间的跳转,也包含了一些常见的过渡动画,包括水平翻页、垂直弹出等等。
Navigator
React Native目前有几个内置的导航器组件,一般来说我们首推Navigator
。它使用纯JavaScript实现了一个导航栈,因此可以跨平台工作,同时也便于定制。
场景(Scene)的概念与使用
无论是View
中包含Text
,还是一个排满了图片的ScrollView
,渲染各种组件现在对你来说应该已经得心应手了。这些摆放在一个屏幕中的组件,就共同构成了一个“场景(Scene)”。
场景简单来说其实就是一个全屏的React组件。与之相对的是单个的Text
、Image
又或者是你自定义的什么组件,仅仅占据页面中的一部分。你其实已经不知不觉地接触到了场景——在前面的教程中,“编写HelloWorld”、“使用Flexbox布局”、“如何使用ListView”中的组件都是完整的场景示例。
下面我们来定义一个仅显示一些文本的简单场景。创建一个名为“MyScene.js”的文件,然后粘贴如下代码:
import React, { Component } from 'react'; import { View, Text } from 'react-native'; export default class MyScene extends Component { static get defaultProps() { return { title: 'MyScene' }; } render() { return ( <View> <Text>Hi! My name is {this.props.title}.</Text> </View> ) } }
注意组件声明前面的export default
关键字。它的意思是导出(export)当前组件,以允许其他组件引入(import)和使用当前组件,就像下面这样(下面的代码你可以写在index.ios.js或是index.android.js中):
import React, { Component } from 'react'; import { AppRegistry } from 'react-native'; // ./MyScene表示的是当前目录下的MyScene.js文件,也就是我们刚刚创建的文件 // 注意即便当前文件和MyScene.js在同一个目录中,"./"两个符号也是不能省略的! // 但是.js后缀是可以省略的 import MyScene from './MyScene'; class YoDawgApp extends Component { render() { return ( <MyScene /> ) } } AppRegistry.registerComponent('YoDawgApp', () => YoDawgApp);
我们现在已经创建了只有单个场景的App。其中的MyScene
同时也是一个可复用的Reac组件的例子。
使用Navigator
场景已经说的够多了,下面我们开始尝试导航跳转。首先要做的是渲染一个Navigator
组件,然后通过此组件的renderScene
属性方法来渲染其他场景。
render() { return ( <Navigator initialRoute={{ title: 'My Initial Scene', index: 0 }} renderScene={(route, navigator) => { <MyScene title={route.title} /> }} /> ); }
使用导航器经常会碰到“路由(route)”的概念。“路由”抽象自现实生活中的路牌,在RN中专指包含了场景信息的对象。renderScene
方法是完全根据路由提供的信息来渲染场景的。你可以在路由中任意自定义参数以区分标记不同的场景,我们在这里仅仅使用title
作为演示。
将场景推入导航栈
要过渡到新的场景,你需要了解push
和pop
方法。这两个方法由navigator
对象提供,而这个对象就是上面的renderScene
方法中传递的第二个参数。 我们使用这两个方法来把路由对象推入或弹出导航栈。
navigator.push({ title: 'Next Scene', index: 1, }); navigator.pop();
下面是一个更完整的示例:
import React, { Component, PropTypes } from 'react'; import { Navigator, Text, TouchableHighlight, View } from 'react-native'; export default class SimpleNavigationApp extends Component { render() { return ( <Navigator initialRoute={{ title: 'My Initial Scene', index: 0 }} renderScene={(route, navigator) => <MyScene title={route.title} // 推入新场景所调用的方法 onForward={() => { const nextIndex = route.index + 1; navigator.push({ title: 'Scene ' + nextIndex, index: nextIndex, }); }} // 返回上一个场景所调用的方法 onBack={() => { if (route.index > 0) { navigator.pop(); } }} /> } /> ) } } class MyScene extends Component { static propTypes = { title: PropTypes.string.isRequired, onForward: PropTypes.func.isRequired, onBack: PropTypes.func.isRequired, } render() { return ( <View> <Text>Current Scene: { this.props.title }</Text> <TouchableHighlight onPress={this.props.onForward}> <Text>Tap me to load the next scene</Text> </TouchableHighlight> <TouchableHighlight onPress={this.props.onBack}> <Text>Tap me to go back</Text> </TouchableHighlight> </View> ) } }
在这个例子中,MyScene
通过title
属性接受了路由对象中的title值。它还包含了两个可点击的组件TouchableHighlight
,会在点击时分别调用通过props传入的onForward
和onBack
方法,而这两个方法各自调用了navigator.push()
和navigator.pop()
,从而实现了场景的变化。
React Native之Navigator的更多相关文章
- React Native导航器Navigator
React Native导航器Navigator 使用导航器可以让你在应用的不同场景(页面)间进行切换.导航器通过路由对象来分辨不同的场景.利用renderScene方法,导航栏可以根据指定的路由来渲 ...
- React Native之 Navigator与NavigatorIOS使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- react native 导航器 Navigator 简单的例子
最近学习react native 是在为全栈工程师而努力,看网上把react native说的各种好,忍不住学习了一把.总体感觉还可以,特别是可以开发android和ios这点非常厉害,刚开始入门需要 ...
- react native的Navigator组件示例
import React, {Component} from 'react';import {ScrollView, StyleSheet, Text, View, PixelRatio} from ...
- React Native使用Navigator组件进行页面导航报this.props....is not a function错误
在push的时候定义回调函数: this.props.navigator.push({ component: nextVC, title: titleName, passProps: { //回调 g ...
- React Native中Navigator的安装与使用
一.安装Navigator 1.安装react-native-deprecated-custom-components npm install react-native-deprecated-cust ...
- React Native APP结构探索
APP结构探索 我在Github上找到了一个有登陆界面,能从网上获取新闻信息的开源APP,想来研究一下APP的结构. 附上原网址:我的第一个React Native App 具体来讲,就是研究一个复杂 ...
- iOS 写给iOS开发者的React Native学习路线(转)
我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...
- 写给iOS开发者的React Native学习路线(转)
我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...
随机推荐
- iOS 隐藏导航条分割线
// 导航条分割线 @property (nonatomic, strong) UIView *navSeparateView; // 获取导航条分割线 UIView *backgroundView ...
- Java中的String,StringBuilder,StringBuffer三者的区别
最近在学习Java的时候,遇到了这样一个问题,就是String,StringBuilder以及StringBuffer这三个类之间有什么区别呢,自己从网上搜索了一些资料,有所了解了之后在这里整理一下, ...
- React Suite v3.0 正式版发布
React Suite v3.0 正式版发布 相信很多人会好奇,React Suite 是什么? React Suite 是 HYPERS 前端团队和 UX 团队开源的一套基于 React 的 UI ...
- ionic3-ng4学习见闻--(自定义ion-tab图标)
学习混合开发语言,目的就是为了快速开发一个适用于多平台的app. app基本都会有footer,也就是tabbar,用来快速导航不同的页面. ionic也有这个组件,ion-tab. 常用方法如下: ...
- swiper实现臭美app滑动效果
一.臭美app效果: 我的需求是这样,上面正常滑动,点击下面的小卡牌,上面的滑动区也随之切换到当前的点击态. 二.实现: css: 主要设置可见区域的几张卡牌的位置,注意的几个位置是,中间的激活态和左 ...
- 网络不能上网但能ping通处理
同事电脑不能上网,经过检查可以排除网线和网络问题,默认网关以及网页地址都能ping通,从网上搜索说是LSP问题,但是根据其操作方式修复,还是无效. 最后,不知道怎么捣鼓的,问题解决了. 操作流程: 1 ...
- delphi 给EXE文件增加区段
学习 PE 可执行文件格式,用 delphi 实现给 EXE 文件增加区段 源码下载(StudyPE.zip) unit uStudyPE; interface uses Classes, SysUt ...
- PHP MySQL 创建数据表
PHP 创建 MySQL 表 一个数据表有一个唯一名称,并有行和列组成. 使用 MySQLi 和 PDO 创建 MySQL 表 CREATE TABLE 语句用于创建 MySQL 表. 我们将创建一个 ...
- Docker实例:创建一个点到点连接
默认情况下,Docker 会将所有容器连接到由 docker0 提供的虚拟子网中. 用户有时候需要两个容器之间可以直连通信,而不用通过主机网桥进行桥接. 解决办法很简单:创建一对 peer 接口,分别 ...
- springMVC源码分析--异常处理机制HandlerExceptionResolver简单示例(一)
springMVC对Controller执行过程中出现的异常提供了统一的处理机制,其实这种处理机制也简单,只要抛出的异常在DispatcherServlet中都会进行捕获,这样就可以统一的对异常进行处 ...