reactnative(2) - Navigator 使用案例
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
ScrollView,
StyleSheet,
Text,
View,
TouchableHighlight,
Navigator,
} from 'react-native'; class NavButton extends React.Component{
render(){
return(
<TouchableHighlight style={styles.button}
underlayColor='#b5b5b5' onPress={this.props.onPress}>
<Text style={styles.text}>{this.props.text}</Text>
</TouchableHighlight>
);
} }
class NavMenu extends React.Component{
render(){
return(
<View style={{flex:1,}}>
<Text style={styles.messageText}>{this.props.message}</Text>
<NavButton onPress={()=>{this.props.navigator.push({
message:'Push进来的页面',
sceneConfig:Navigator.SceneConfigs.FloatFromRight,
});}} text='Push到下一级页面' /> <NavButton onPress={() => {
this.props.navigator.push({
message: 'Present进来的页面',
sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
});
}}
text="Present到下一级页面"
/>
<NavButton onPress={() => {
this.props.navigator.pop();
}}
text="Pop到上一级页面"
/>
<NavButton onPress={() => {
this.props.navigator.popToTop();
}}
text="Pop到主页面"
/>
</View>
);
}
}
class MyProject extends Component { render() {
return (
<Navigator style={styles.container} initialRoute={{message:'主页面',}}
renderScene={(route,navigator)=><NavMenu
message={route.message}
navigator={navigator}
/>} configureScene={(route)=>{
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.FloatFromBottom;
}}/>
);
} } const styles = StyleSheet.create({
container: {
flex: 1,
},
messageText: {
fontSize: 14,
fontWeight: '500',
padding: 15,
marginTop: 50,
marginLeft: 15,
},
button: {
backgroundColor: 'green',
padding: 15,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: 'black',
},
text:{
fontSize:14,
color:'white',
},
}); AppRegistry.registerComponent('MyProject', () => MyProject);
效果图:
参考案例:
http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Bnavigator%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3%E4%BB%A5%E5%8F%8A%E5%AE%9E%E4%BE%8B23/
reactnative(2) - Navigator 使用案例的更多相关文章
- React-Native 之 Navigator与NavigatorIOS使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- reactnative(1) - RefreshControl 使用案例
'use strict'; import React, { Component } from 'react'; import { AppRegistry, ScrollView, StyleSheet ...
- ReactNative Navigator
https://facebook.github.io/react-native/docs/navigator.html Navigator实现了页面之间的跳转. Demo描述:打开即进入“课程”页面, ...
- ReactNative: 使用导航栏组件-NavigatorIOS组件和Navigator组件
一.简言 在软件开发中,不论是Web还是App,它们的应用程序都是由很多的功能视图组成的.对于这些组合的视图,如何实现页面间平滑地过渡,应用都有统一的一套跳转机制,这个功能就是路由或者叫导航.应用程序 ...
- react-native 完整实现登录功能
react native实现登录功能,包括ui的封装.网络请求的封装.导航器的实现.点击事件. demo下载:react-native 完整实现登录功能 后台如果是springmvc实现的需要配置上如 ...
- react native的Navigator组件示例
import React, {Component} from 'react';import {ScrollView, StyleSheet, Text, View, PixelRatio} from ...
- 混合开发的大趋势之一React Native之页面跳转
转载请注明出处:王亟亟的大牛之路 最近事情有点多,没有长时间地连贯学习,文章也停了一个多礼拜,愧疚,有时间还是继续学习,继续写! 还是先安利:https://github.com/ddwhan0123 ...
- React Native中的DeviceEventEmitter.addListener与DeviceEventEmitter.emit
官方文档没有对这两个方法做很好的解释,需要自己找资料研究.看了几篇文章,总结是和订阅发布模式差不多,用来事件监听发送的. React Native学习之DeviceEventEmitter传值 R ...
- 【水滴石穿】github_popular
项目不难,就是文件摆放位置跟别的不一样 https://github.com/chenji336/github_popular //定义入口是app.js ///** @format */ impor ...
随机推荐
- 在eclipse中如何在大量项目中查找指定文件
在eclipse中如果希望在大量的项目中寻找指定的文件可不是一件轻松的事,还好eclipse提供了强大的搜索功能. 我们可以通过通配符或正则表达式来设定查寻条件,下面是操作示例: ctrl+h 打开搜 ...
- STL源码剖析 学习笔记 MiniSTL
https://github.com/joeyleeeeeee97 目录: 第二章 空间适配器 第三章 迭代器 第四章 序列式容器(vector,list,deque,stack,heap,prior ...
- endWith is not a function
解决方法,增加String的扩展 String.prototype.endWith = function(suffix) { return this.indexOf(suffix, this.leng ...
- Windows 10+Ubuntu 16.04在MBR分区上安装双系统(转)
以下内容转自这篇博客: http://www.cnblogs.com/Duane/p/5424218.html http://www.cnblogs.com/Duane/p/6776302.html( ...
- 每日五题(jsp)
1.forward 和 redirect 的差别 答: 1.从地址栏显示来说 forward是server请求资源,server直接訪问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容 ...
- JavaScript初探之——图片移动
在我们打开页面的时候我们看到的大部分页面都是动态的,曾经学习VB的时候要实现一些动态的画面第一个想到的就是用Flash,如今学习了BS的东西,才算是开眼界了,刚刚学习了一个动画的效果,给大家展示一下. ...
- window+nginx+php-cgi的php-cgi线程/子进程问题
见bbs http://bbs.csdn.net/topics/390803643/close 正常的配置情况下,window的php-cgi是不会出现多线程/子进程的,例如以下配置 fastcgi_ ...
- 数据库数据在Java占用内存简单估算
数据库数据在Java占用内存简单估算 结论: 1.数据库记录放在JAVA里,用对象(ORM一般的处理方式)须要4倍左右的内存空间.用HashMap这样的KV保存须要10倍空间; 2.假设你主要数据是t ...
- 2015:WPS笔试-Android开发岗位
题目一共三道: 一:实现一个函数,能够推断两条直线的关系:平行.重合.垂直或相交. 二:实现一个函数.能够得到随意两个日期的相隔天数. 三:针对题目一或题目二,实现一个完整的单元測试. (笔试后在网上 ...
- SVN Working copying 'xxxxx/xxxx/xxxx' locked
使用SVN想更新上传时提示Working copying 'xxxx/xxxx/xxx' locked 解决方法: 选中你的项目,上面工具栏一行找到 Action → Cleanup all Wor ...