ReactNative学习笔记(七)Navigator的使用
前言
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的使用的更多相关文章
- react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置
参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...
- (转)Qt Model/View 学习笔记 (七)——Delegate类
Qt Model/View 学习笔记 (七) Delegate 类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...
- Typescript 学习笔记七:泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- python3.4学习笔记(七) 学习网站博客推荐
python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...
- Go语言学习笔记七: 函数
Go语言学习笔记七: 函数 Go语言有函数还有方法,神奇不.这有点像python了. 函数定义 func function_name( [parameter list] ) [return_types ...
- iOS 学习笔记七 【博爱手把手教你使用2016年gitHub Mac客户端】
iOS 学习笔记七 [博爱手把手教你使用gitHub客户端] 第一步:首先下载git客户端 链接:https://desktop.github.com 第二步:fork 大神的代码[这里以我的代码为例 ...
- 【opencv学习笔记七】访问图像中的像素与图像亮度对比度调整
今天我们来看一下如何访问图像的像素,以及如何改变图像的亮度与对比度. 在之前我们先来看一下图像矩阵数据的排列方式.我们以一个简单的矩阵来说明: 对单通道图像排列如下: 对于双通道图像排列如下: 那么对 ...
- Linux学习笔记(七) 查询系统
1.查看命令 (1)man 可以使用 man 命令名称 命令查看某个命令的详细用法,其显示的内容如下: NAME:命令名称 SYNOPSIS:语法 DESCRIPTION:说明 OPTIONS:选项 ...
- go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer)
目录 go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer) demo demo server demo client 池 dao service p2c ro ...
随机推荐
- 遇到问题或bug时要做的事。
1,做事细心,只有细心才能减少bug量,做总结. 2,开发中遇到bug和错误,第一要想到是程序代码的问题.而首先想到的不是其他问题(比如版本,框架或兼容问题等). 3,程序不能按照自己的意愿执行,时先 ...
- Timestamp 数据类型四舍五入引起的神奇bug
神奇bug, Timestamp 会四舍五入也会引起 bug .. String UUID = java.util.UUID.randomUUID().toString(); long time = ...
- Java 原子语义同步的底层实现
原子语义同步的底层实现 volatile volatile只能保证变量对各个线程的可见性,但不能保证原子性.关于 Java语言 volatile 的使用方法就不多说了,我的建议是 除了 配合packa ...
- leetcode104
/** * Definition for a binary tree node. * public class TreeNode { * public int val; * public TreeNo ...
- springboot maven 部署
1.在pom.xml文件中配置tomcat插件 <build> <plugins> <plugin> <groupId>org.springframew ...
- cdnbest节点后台的3311如何登陆
如图操作点节点列表中节点管理修改节点3311的权限(因为初次安状节点权限是随机生成的,所以要修改),同时开启3311,然后就能在浏览器登陆节点后台了
- .NET代码混淆——开源.net 混淆器ConfuserEx介绍
转载:https://blog.csdn.net/xiaoyong_net/article/details/78988264
- Tengine安装(阿里baba的)-Nginx
在先前的文章中介绍过Tengine,先前只是使用了运维人员配置好的内容,未自己进行过安装配置.周末闲来无事,对于Tengine进行了尝试性的安装.记录下面方便以后再做改进. Tengine官网上有个非 ...
- nginx-web身份验证
1.配置文件设置: server { listen 80; server_name www.longshuai.com www1.longshuai.com; location / { root /w ...
- [leetcode]77. Combinations组合
Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. Example: I ...