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 相关文章推荐
JavaScript 继承机制的实现(待续)
May 18 Javascript
javascript new后的constructor属性
Aug 05 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 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利用header跳转失效的解决方法
2014/10/24 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
python基于multiprocessing的多进程创建方法
2015/06/04 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
python读取各种文件数据方法解析
2018/12/29 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
python将unicode和str互相转化的实现
2020/05/11 Python
python如何写出表白程序
2020/06/01 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
同居协议书范本
2014/04/23 职场文书
园林系毕业生求职信
2014/06/23 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
免职证明样本
2014/10/23 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
学术会议开幕词
2016/03/03 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
Python中tkinter的用户登录管理的实现
2021/04/22 Python
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
JavaScript文档对象模型DOM
2021/11/20 Javascript