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 ...
随机推荐
- 【Codeforces 375A】Divisible by Seven
[链接] 我是链接,点我呀:) [题意] 让你把一个包含数字1,6,8,9的数字重新组合,使得组合成的数字能被7整除 [题解] 我们先提取出来1,6,8,9各1个 然后把剩余的len-4个数字除了0之 ...
- HDU1026 Ignatius and the Princess I 【BFS】+【路径记录】
Ignatius and the Princess I Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (J ...
- nodejs fs.open
fs.open(path, flags, [mode], [callback(err, fd)])是 POSIX open 函数的封装,与 C 语言标准库中的 fopen 函数类似.它接受两个必选参数 ...
- ssh连接断开后 shell进程退出
问题描述:当SSH远程连接到服务器上,然后运行一个服务 ./catalina.sh start,然后把终端开闭(切断SSH连接)之后,发现该服务中断,导致网页无法访问. 解决方法:使用nohup命 ...
- [JavaEE] Implement a test for REST endpoint
1. We have the BookEndpoint.java: package com.pluralsight.bookstore.rest; import com.pluralsight.boo ...
- [LeetCode] 035. Search Insert Position (Medium) (C++)
索引:[LeetCode] Leetcode 题解索引 (C++/Java/Python/Sql) Github: https://github.com/illuz/leetcode 035. Sea ...
- JobHistory搜索智能化
前言 做过hadoop集群问题排查工作的同学一定用过JobHistory,这是一个非常好用的"利器",为什么这么说呢?正如这个工具的名称所叫的那样,这个工具能帮你找到历史Job跑过 ...
- 解决安装OpenShift Client Tools时提示的dl/import (LoadError)问题
安装成功Ruby和git以后.执行rhc setup时提演示样例如以下错误: C:/Ruby22-x64/lib/ruby/2.2.0/rubygems/core_ext/kernel_require ...
- The Pragmatic Programmer 读书笔记之中的一个 DRY-Don’t Repeat Youself
The Pragmatic Programmer读书笔记之中的一个 DRY-Don't Repeat Youself 尽管自己买了非常多软件project方面的书,可是由于时间的问题.一直没有静 ...
- android实现跑马灯效果(能够实现两个以上跑马灯)
本文用了继承自TextView的MarqueeTextView来实现跑马灯效果.原因是,跑马灯效果是须要TextView拥有焦点才会跑动的.而有时候TextView获得焦点会有点耗时,造成要等待一段时 ...