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" & ...
随机推荐
- QR 编码原理(三)
一.日本汉字(KANJI)是两个字节表示的字符码,编码的方式是将其转换为13字节的二进制码制. 转换步骤为: 1.对于JIS值为8140(hex) 到9FFC(hex)之间字符: a)将待转换的JIS ...
- 快速了解Hash算法
hash hashcode java 1.hash 2.hash算法 1.hash Hash,一般翻译做“散列”,也有直接音译为“哈希”的,就是把任意长度的输入(又叫做预映射pre-image)通过 ...
- FlowNet2.0 安装指南
 \(安装环境: \color{red}{Ubuntu16.04 + CUDA8.0 + cuDNN5.0}\) 安装 CUDA CUDA 安装准备 CUDA 官方安装文档 首先查看是否电脑具有支持 ...
- linux驱动 之 module_init解析 (上)【转】
转自:https://blog.csdn.net/Richard_LiuJH/article/details/45669207 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...
- 转-JavaWeb三大组件之Listener监听器
JavaWeb三大组件之Listener监听器一.概述1,它是一个接口,内容由我们来实现 2,它需要注册,例如注册在按钮上 3,监听器中的方法,会在特殊事件发生时被调用 二.JavaWeb中的监听器1 ...
- python操作三大主流数据库(5)python操作mysql⑤使用Jinja2模板提取优化页面展示
python操作mysql⑤使用Jinja2模板提取优化页面展示 在templates目录下的index.html.cat.html等页面有一些共同的元素,代码比较冗余可以使用模板提取公共代码,在各网 ...
- Springboot:开发时工程启动慢
个人的解决办法是删除workspace中的histor 然后重启Eclipse,发现一切正常.
- Linux学习之CentOS(三)--初识linux的文件系统以及用户组等概念
Linux学习之CentOS(三)--初识linux的文件系统以及用户组等概念 进入到了Linux学习之CentOS第三篇了,这篇文章主要记录下对linux文件系统的初步认识,以及用户组.用户权限.文 ...
- cocos2dx-lua 延迟调用函数和定时器
下面是cocos官方的方法. function performWithDelay(node, callback, delay) local delay = cc.DelayTime:create(de ...
- 【Shared Server Mode】测试调整shared_servers参数对数据库的影响
本文来源于:secooler 的 <[Shared Server Mode]测试调整shared_servers参数对数据库的影响> 关于Shared Server模式的配置方法请参见文 ...