ReactNative页面跳转实例代码


Posted in Javascript onSeptember 27, 2016

效果图如下所示:

ReactNative页面跳转实例代码ReactNative页面跳转实例代码

进入工作目录,运行

react-native init NavigatorProject

创建项目NavigatorProject

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
Image,
Navigator
} from 'react-native'; 
class navigatorProject extends Component{
render(){
let defaultName = 'firstPageName';
let defaultComponent = FirstPageComponent;
return(
<Navigator
initialRoute = {{name: defaultName, component: defaultComponent}}//初始化导航器Navigator,指定默认的页面
configureScene = {
(route) => {
return Navigator.SceneConfigs.FloatFromRight;
//配置场景动画,页面之间跳转时候的动画
}
}
renderScene = {
(route, navigator) =>{
let Component = route.component;
return <Component{...route.params} navigator = {navigator} />
//渲染场景
}
}
/>
);
} 
} 
//第一个页面
class FirstPageComponent extends Component{
clickJump(){
const{navigator} = this.props;
if(navigator){
navigator.push({
//navigator.push 传入name和你想要跳的组件页面
name: "SecondPageComponent",
component: SecondPageComponent
});
} 
}
render(){
return(
<View style = {styles.container}>
<Text>我是第一个页面</Text>
<TouchableHighlight
underlayColor = "rgb(180,135,250)"
activeOpacity = {0.5}
style = {{
borderRadius: 8,
padding: 8,
marginTop: 8,
backgroundColor: "#F30"
}}
onPress = {this.clickJump.bind(this)}>
<Text>点击进入第二个页面</Text>
</TouchableHighlight>
</View>
);
}
} 
//第二个页面
class SecondPageComponent extends Component{
clickJump(){
const{navigator} = this.props;
if(navigator){
navigator.pop();
//navigator.pop 使用当前页面出栈, 显示上一个栈内页面.
}
}
render(){
return(
<View style = {styles.container}>
<Text>我是第二个页面</Text>
<TouchableHighlight
underlayColor = "rgb(180, 135, 250)"
activeOpacity = {0.5}
style = {{
borderRadius: 8,
padding: 8,
marginTop: 5,
backgroundColor: "#F30"
}}
onPress = {this.clickJump.bind(this)}>
<Text>点击返回第一个页面</Text>
</TouchableHighlight>
</View>
);
}
} 
const styles = StyleSheet.create({
 container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#FFFFFF',
 },
});
AppRegistry.registerComponent('navigatorProject', () => navigatorProject);

以上所述是小编给大家介绍的ReactNative页面跳转实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
document.getElementById介绍
Sep 13 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 #Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 #Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 #Javascript
jQuery实现图片轮播效果代码
Sep 27 #Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 #Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 #Javascript
js转html实体的方法
Sep 27 #Javascript
You might like
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
基于jquery的时间段实现代码
2012/08/02 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
python写的一个squid访问日志分析的小程序
2014/09/17 Python
python开发中range()函数用法实例分析
2015/11/12 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
美国性感内衣店:Yandy
2018/06/12 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
后勤园长自我鉴定
2013/10/17 职场文书
会计专业毕业生自我鉴定
2013/10/29 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
主持词开场白
2014/03/17 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
大学开学感言
2015/08/01 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB