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);
延伸:传参。
以上面的代码为基础。
一:
效果图:
//第一个界面
class FirstPageComponent extends Component{
constructor(props){
super(props);
//参数来源
this.state = {
author: '华帅'
};
} clickJump(){
const{navigator} = this.props;
if(navigator){
navigator.push({
name: "SecondPageComponent",
component: SecondPageComponent,
//传递参数,入栈
params: {
author: this.state.author,
}
});
}
} 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{
constructor(props) {
super(props);
this.state = {};
} //接收传递过来的参数
componentDidMount() {
this.setState({
author: this.props.author,
});
} clickJump(){
const{navigator} = this.props;
if(navigator){
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>
<Text>作者是:{this.state.author}</Text>
</View>
);
}
}
二:
效果图:
//第一个页面 class FirstPageComponent extends Component{ constructor(props){
super(props);
//参数来源
this.state = {
author: "华帅",
id: 1,
user: null,
};
} clickJump(){
const{navigator} = this.props;
const self = this;
if(navigator){
navigator.push({
name: "SecondPageComponent",
component: SecondPageComponent,
//传递参数,入栈
params:{
author: this.state.author,
id: this.state.id,
//从第二页获取user
getUser: function(user){
self.setState({
user: user
});
}
}
});
}
} render(){
if(this.state.user){
return(
<View>
<Text style = {styles.container}>用户信息:{JSON.stringify(this.state.user)}</Text>
</View>
);
}else{
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>
);
}
}
}
const USER_MODELS = {
1: {name: '华帅', age: 44},
2: {name: '小明', age: 12}
};
//第二个页面 class SecondPageComponent extends Component{
constructor(props){
super(props);
this.state = {
id:null
};
} //接收传递过来的参数
componentDidMount(){
this.setState({
author: this.props.author,
id: this.props.id,
});
} clickJump(){
const{navigator} = this.props;
if(this.props.getUser){
let user = USER_MODELS[this.props.id];
this.props.getUser(user);
} if(navigator){
navigator.pop();
}
} render(){
return(
<View style = {styles.container}>
<Text>我是第二个页面</Text>
<Text>ID: {this.state.id}</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>
<Text>作者是:{this.state.author}</Text>
</View>
);
}
}
ReactNative——页面跳转的更多相关文章
- ReactNative踩坑日志——页面跳转之——Undefined is not an Object(evaluating this2.props.navigation.navigate)
页面跳转时,报 Undefined is not an Object(evaluating this2.props.navigation.navigate) 出错原因:在一个页面组件中调用了另一个组 ...
- 混合开发的大趋势之一React Native之页面跳转
转载请注明出处:王亟亟的大牛之路 最近事情有点多,没有长时间地连贯学习,文章也停了一个多礼拜,愧疚,有时间还是继续学习,继续写! 还是先安利:https://github.com/ddwhan0123 ...
- react-native页面之间的相互传值
react-native页面之间的相互传值 之前在自己学习react-native的时候,在页面跳转和传值问题上花了一段时间去网上搜索和查找资料,自己总结了两个方法.可以参考 https://blog ...
- react-native页面间传递数据的几种方式
1. 利用react-native 事件DeviceEventEmitter 监听广播 应用场景: - 表单提交页面, A页面跳转到B页面选人, 然后返回A页面, 需要将B页面选择的数据传回A页面. ...
- ReactNavigation中如何实现页面跳转
一.ReactNavigation中如何实现页面跳转 因为每个屏幕组件(具有路由地址的组件)都是由App根组件自动创建并挂载的,App组件 在创建屏幕组件时,会自动传递进来一个props: nav ...
- JSP页面跳转的几种实现方法
使用href超链接标记 客户端跳转 使用JavaScript 客户端跳转 提交表单 客户端跳转 使用response ...
- web设计页面跳转的方法
一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx"); 2. 利用url地址打 ...
- 前端开发--ppt展示页面跳转逻辑实现
1. 工程地址:https://github.com/digitalClass/web_page 网站发布地址: http://115.28.30.25:8029/ 2. 今天遇到一个小问题, 同组的 ...
- Html中设置访问页面不在后进行其他页面跳转
Html中设置访问页面不在后进行其他页面跳转 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
随机推荐
- 编写Python脚本进行ARP欺骗
1.系统环境:Ubuntu 16.04 Python版本:2.7 2.攻击机器:Ubuntu(192.16.0.14) 目标机器:Windows 7(192.168.0.9) 网关:(192.168. ...
- 20165231 预备作业二:学习基础和C语言基础调查
微信文章感想 读了娄老师微信公众号中的文章,老师给我们的启示首先就是要坚持,万事开头难,但是只要肯坚持就一定会有所成就,不管是学习还是生活方面.其中最有触动的就是减肥了,是我三四年来一直难以完成的目标 ...
- Linux运行时I/O设备的电源管理框架【转】
转自:https://www.cnblogs.com/coryxie/archive/2013/03/01/2951243.html 本文介绍Linux运行时I/O设备的电源管理框架.属于Linux内 ...
- java官网真不错
要用到一个软件,打开时说没找到javaw,然后大家说这是因为没安装java,就按着链接去了java官网 https://www.java.com/zh_CN/download/faq/remove_o ...
- requests库入门10-超时,错误与异常
在实际发布到生产上的接口测试代码,都会加上超时的设置,当服务器超过一定时间没有响应,会报出超时异常.因为requests会自动等待响应.如果不加上超时的设置,可能脚本会一直卡在那里.. 超时设置在请求 ...
- MySQL之路 ——2、步履维艰的建表
1.首先,在windows下,不区分大小写.Linux下可能要区分,具体参考下面文章 mysql表名忽略大小写问题记录 2.用command line client 每句以分号结尾. 3.Navica ...
- oracle监控
python代码 #!/usr/bin/env python # -*- coding: UTF-8 -*- import subprocess import sys import re def ru ...
- python装饰器的4种类型:函数装饰函数、函数装饰类、类装饰函数、类装饰类
一:函数装饰函数 def wrapFun(func): def inner(a, b): print('function name:', func.__name__) r = func(a, b) r ...
- ThreadLocal与Synchronized区别
ThreadLocal和Synchonized都用于解决多线程并发访问他们两者的区别:synchronized是利用锁的机制,使变量或代码块在某一时该只能被一个线程访问,而ThreadLocal为每一 ...
- Redis高级特性介绍及实例分析
转自:http://www.jianshu.com/p/af7043e6c8f9 Redis基础类型回顾 String Redis中最基本,也是最简单的数据类型.注意,VALUE既可以是简单的St ...