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 相关文章推荐
JS 对象介绍
Jan 20 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
js图片上传的封装代码
Aug 01 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
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中的时间处理
2006/10/09 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
python提取内容关键词的方法
2015/03/16 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
基于Django用户认证系统详解
2018/02/21 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
Python列表操作方法详解
2020/02/09 Python
python同时遍历两个list用法说明
2020/05/02 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
房屋出售协议书
2014/04/10 职场文书
迎七一演讲稿
2014/09/12 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
KVM基础命令详解
2022/04/30 Servers