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 相关文章推荐
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
javascript递归函数定义和用法示例分析
Jul 22 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
express框架下使用session的方法
2019/07/31 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
js实现随机点名程序
2020/09/17 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
个人收入证明范本
2014/01/12 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
亚运会口号
2014/06/20 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
教师节晚会主持词
2015/06/30 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python