前言

Navigator主要用于ReactNative中的跳转,中文文档:

http://reactnative.cn/docs/0.39/using-navigators.html

懒得打字介绍更多了,将上面的官网文档看一遍之后应该有个大概了解了。

  • initialRoute 配置初始路由参数;
  • configureScene 用于配置场景动画;
  • renderScene 指示具体如何渲染一个场景;
  • 一个可选的导航栏组件,个人感觉这个不太好用,一般不用它;
  • {...route.passProps}用于批量传递参数到this.props

简单示例

下面写了一个最简单的页面跳转与返回的例子test-navigator-no-bar.js

效果图:

import React, { Component } from 'react';
import { AppRegistry, Text, Image, View, StyleSheet, Navigator, TouchableOpacity } from 'react-native'; // 一个简单的navigator使用示例
export default class TestNavigator extends Component
{
configureScene(route, routeStack)
{
return Navigator.SceneConfigs.PushFromRight;
}
render()
{
return (
<Navigator
style={{flex:1}}
initialRoute={{component: FirstPage}}
configureScene={this.configureScene}
renderScene={(route, navigator) => <route.component navigator={navigator} {...route.passProps} />} />
);
}
} // 首页
class FirstPage extends Component
{
render()
{
return (
<View>
<TouchableOpacity onPress={() => this.props.navigator.push({component: SecondPage})}>
<Text style={{fontSize:28}}>点击跳转到二级页面</Text>
</TouchableOpacity>
</View>
);
}
} // 二级页面
class SecondPage extends Component
{
render()
{
return (
<View>
<TouchableOpacity onPress={()=>this.props.navigator.pop()}>
<Text style={{color: 'red', fontSize: 28}}>点击返回首页</Text>
</TouchableOpacity>
</View>
);
}
}

带导航的示例

效果图:

完整代码如下(test-navigator-with-bar.js):

import React, { Component } from 'react';
import { AppRegistry, Text, Image, View, StyleSheet, TextInput, ScrollView, ListView, Navigator, TouchableOpacity } from 'react-native'; // 一个简单的navigator使用示例
export default class TestNavigator extends Component
{ configureScene(route, routeStack)
{
if (route.type == 'Modal') {
return Navigator.SceneConfigs.FloatFromBottom;
}
return Navigator.SceneConfigs.PushFromRight;
} render()
{
return (
<Navigator
style={{flex:1}}
initialRoute={{component: FirstPage, passProps: {title: '首页', rightText: '菜单'}}}
configureScene={this.configureScene}
renderScene={(route, navigator) => <route.component route={route} navigator={navigator} {...route.passProps} />}
navigationBar={
<Navigator.NavigationBar
style={styles.navContainer}
routeMapper={NavigationBarRouteMapper}/>} />
);
}
} // 首页
class FirstPage extends Component
{
/**
* 跳转
*/
gotoPage(component, title)
{
this.props.navigator.push(
{
component: component,
passProps: {
title: '二级页面',
lastPageTitle: this.props.title
}
})
} render()
{
return (
<View style={{paddingTop: 80}}>
<TouchableOpacity onPress={() => this.gotoPage(SecondPage, '二级页面')}>
<Text style={{fontSize:28, padding: 10}}>点击跳转到二级页面</Text>
</TouchableOpacity>
<Text style={{padding: 10, fontSize: 20}}>这是首页,这是首页,这是首页,这是首页,这是首页,这是首页,这是首页,这是首页,这是首页,这是首页,这是首页</Text>
</View>
);
}
} // 二级页面
class SecondPage extends Component
{
render()
{
return (
<View style={{paddingTop: 80}}>
<TouchableOpacity
style={styles.button}
onPress={()=>this.props.navigator.pop()}>
<Text style={styles.buttonText}>
点击返回{this.props.lastPageTitle}
</Text>
</TouchableOpacity>
</View>
);
}
} // 导航栏的Mapper
var NavigationBarRouteMapper =
{
// 左键
LeftButton(route, navigator, index, navState)
{
if (index <= 0) return null;
return (
<TouchableOpacity
underlayColor='transparent'
onPress={() => {if (index > 0) {navigator.pop()}}}>
<Text style={styles.leftNavButtonText}>
返回
</Text>
</TouchableOpacity>
);
},
// 右键
RightButton(route, navigator, index, navState)
{
if(!route.passProps.rightText) return null;
return (
<TouchableOpacity
onPress={() => alert('测试菜单')}>
<Text style={styles.rightNavButtonText}>
{route.passProps.rightText}
</Text>
</TouchableOpacity>
);
},
// 标题
Title(route, navigator, index, navState)
{
return (
<Text style={styles.title}>
{route.passProps.title || '默认标题'}
</Text>
);
}
}; var styles = StyleSheet.create({
// 页面框架
container: {
flex: 4,
marginTop: 100,
flexDirection: 'column'
},
// 导航栏
navContainer: {
backgroundColor: '#41ABF7',
paddingTop: 12,
paddingBottom: 10,
flex: 1
},
// 导航栏文字
headText: {
color: '#ffffff',
fontSize: 22
},
// 按钮
button: {
height: 120,
marginTop: 10,
justifyContent: 'center', // 内容居中显示
backgroundColor: '#ff1049',
alignItems: 'center'
},
// 按钮文字
buttonText: {
fontSize: 18,
color: '#ffffff'
},
// 左面导航按钮
leftNavButtonText: {
color: '#ffffff',
fontSize: 18,
marginLeft: 13,
marginTop: 12,
flex: 1
},
// 右面导航按钮
rightNavButtonText: {
color: '#ffffff',
fontSize: 18,
marginRight: 13,
marginTop: 12,
flex: 1
},
// 标题
title: {
fontSize: 18,
color: '#fff',
textAlign: 'center',
alignItems: 'center',
justifyContent: 'center',
fontWeight: 'bold',
marginTop: 12
}
});

关于动画

所有可用的场景动画:

console.log(Navigator.SceneConfigs);

其它

判断一个页面是否能够继续返回:

var navigator = this.props.navigator;
if(navigator.getCurrentRoutes().length > 1)
{
navigator.pop();
}
else
{
alert('不能再返回了!');
}

ReactNative学习笔记(七)Navigator的使用的更多相关文章

  1. react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

    参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...

  2. (转)Qt Model/View 学习笔记 (七)——Delegate类

    Qt Model/View 学习笔记 (七) Delegate  类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...

  3. Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...

  4. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  5. python3.4学习笔记(七) 学习网站博客推荐

    python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...

  6. Go语言学习笔记七: 函数

    Go语言学习笔记七: 函数 Go语言有函数还有方法,神奇不.这有点像python了. 函数定义 func function_name( [parameter list] ) [return_types ...

  7. iOS 学习笔记七 【博爱手把手教你使用2016年gitHub Mac客户端】

    iOS 学习笔记七 [博爱手把手教你使用gitHub客户端] 第一步:首先下载git客户端 链接:https://desktop.github.com 第二步:fork 大神的代码[这里以我的代码为例 ...

  8. 【opencv学习笔记七】访问图像中的像素与图像亮度对比度调整

    今天我们来看一下如何访问图像的像素,以及如何改变图像的亮度与对比度. 在之前我们先来看一下图像矩阵数据的排列方式.我们以一个简单的矩阵来说明: 对单通道图像排列如下: 对于双通道图像排列如下: 那么对 ...

  9. Linux学习笔记(七) 查询系统

    1.查看命令 (1)man 可以使用 man 命令名称 命令查看某个命令的详细用法,其显示的内容如下: NAME:命令名称 SYNOPSIS:语法 DESCRIPTION:说明 OPTIONS:选项 ...

  10. go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer)

    目录 go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer) demo demo server demo client 池 dao service p2c ro ...

随机推荐

  1. 遇到问题或bug时要做的事。

    1,做事细心,只有细心才能减少bug量,做总结. 2,开发中遇到bug和错误,第一要想到是程序代码的问题.而首先想到的不是其他问题(比如版本,框架或兼容问题等). 3,程序不能按照自己的意愿执行,时先 ...

  2. Timestamp 数据类型四舍五入引起的神奇bug

    神奇bug, Timestamp 会四舍五入也会引起 bug .. String UUID = java.util.UUID.randomUUID().toString(); long time = ...

  3. Java 原子语义同步的底层实现

    原子语义同步的底层实现 volatile volatile只能保证变量对各个线程的可见性,但不能保证原子性.关于 Java语言 volatile 的使用方法就不多说了,我的建议是 除了 配合packa ...

  4. leetcode104

    /** * Definition for a binary tree node. * public class TreeNode { * public int val; * public TreeNo ...

  5. springboot maven 部署

    1.在pom.xml文件中配置tomcat插件 <build> <plugins> <plugin> <groupId>org.springframew ...

  6. cdnbest节点后台的3311如何登陆

    如图操作点节点列表中节点管理修改节点3311的权限(因为初次安状节点权限是随机生成的,所以要修改),同时开启3311,然后就能在浏览器登陆节点后台了

  7. .NET代码混淆——开源.net 混淆器ConfuserEx介绍

    转载:https://blog.csdn.net/xiaoyong_net/article/details/78988264

  8. Tengine安装(阿里baba的)-Nginx

    在先前的文章中介绍过Tengine,先前只是使用了运维人员配置好的内容,未自己进行过安装配置.周末闲来无事,对于Tengine进行了尝试性的安装.记录下面方便以后再做改进. Tengine官网上有个非 ...

  9. nginx-web身份验证

    1.配置文件设置: server { listen 80; server_name www.longshuai.com www1.longshuai.com; location / { root /w ...

  10. [leetcode]77. Combinations组合

    Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. Example: I ...