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 ...
随机推荐
- RabbitMQ整合spring----https://www.cnblogs.com/woms/p/7040902.html
https://www.cnblogs.com/woms/p/7040902.html
- Weakness and Poorness CodeForces - 578C 三分搜索 (精度!)
You are given a sequence of n integers a1, a2, ..., an. Determine a real number x such that the weak ...
- Linux下使用tcpdump进行抓包(转)
技巧: 1.可以通过tcpdump抓取某个网卡的包,然后输出日志文件,通过Wireshark进行分析. 2.可以设置Wifi热点,然后通过手机连接这个热点,然后进行tcpdump的分析.而且在Ubun ...
- raywenderlich.com的Swift编程风格指南
翻译自:https://github.com/raywenderlich/swift-style-guide 这个风格指南可能和你从其它地方看到的不同,我们的焦点主要集中在互联网和文章上的可读性.创建 ...
- OC-内存管理的一些要点
创建一个BOOK对象,对其属性进行声明 定义. @property 属性声明 定义了对属性的赋值 -(void) dealloc 方法在对象销毁的时候进行调用. #import <Foundat ...
- C#使用oledb连接excel运行Insert Into语句出现“操作必须使用一个可更新的查询”的解决的方法
我错误发生时的环境:Windows 7,Framework 4.0,Microsoft Office 2007,VS2010,c# WinForm. 部分代码: string strConn = &q ...
- 自己动手写reg注册表文件
自己动手写reg注册表文件 2015-01-12 20:23 1161人阅读 评论(1) 收藏 举报 分类: 玩转Windows应用层编程(12) 版权声明:本文为博主原创文章,未经博主允许不得转 ...
- Hadoop生态系统学习路线
主要介绍Hadoop家族产品,经常使用的项目包含Hadoop, Hive, Pig, HBase, Sqoop, Mahout, Zookeeper, Avro, Ambari, Chukwa.新添加 ...
- cocos2d-x 多触点监听
[cpp] view plaincopy //首先到cocos2d-x项目下的ios目录下.找到AppController.mm文件,在函数 didFinishLaunchingWithOptions ...
- Android对方向感应器的封装调用
Android自动的SensorManager使用起来已经很方便,但由于一些情况我们希望对其中的功能进行封装: 只使用个别的sensor,功能相对单一 要对sensor返回的raw data进行算法处 ...