效果图:

进入工作目录,运行

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——页面跳转的更多相关文章

  1. ReactNative踩坑日志——页面跳转之——Undefined is not an Object(evaluating this2.props.navigation.navigate)

    页面跳转时,报  Undefined is not an Object(evaluating this2.props.navigation.navigate) 出错原因:在一个页面组件中调用了另一个组 ...

  2. 混合开发的大趋势之一React Native之页面跳转

    转载请注明出处:王亟亟的大牛之路 最近事情有点多,没有长时间地连贯学习,文章也停了一个多礼拜,愧疚,有时间还是继续学习,继续写! 还是先安利:https://github.com/ddwhan0123 ...

  3. react-native页面之间的相互传值

    react-native页面之间的相互传值 之前在自己学习react-native的时候,在页面跳转和传值问题上花了一段时间去网上搜索和查找资料,自己总结了两个方法.可以参考 https://blog ...

  4. react-native页面间传递数据的几种方式

    1. 利用react-native 事件DeviceEventEmitter 监听广播 应用场景: - 表单提交页面, A页面跳转到B页面选人, 然后返回A页面, 需要将B页面选择的数据传回A页面. ...

  5. ReactNavigation中如何实现页面跳转

    一.ReactNavigation中如何实现页面跳转 因为每个屏幕组件(具有路由地址的组件)都是由App根组件自动创建并挂载的,App组件 在创建屏幕组件时,会自动传递进来一个props:   nav ...

  6. JSP页面跳转的几种实现方法

    使用href超链接标记      客户端跳转 使用JavaScript               客户端跳转 提交表单                        客户端跳转 使用response ...

  7. web设计页面跳转的方法

    一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx"); 2. 利用url地址打 ...

  8. 前端开发--ppt展示页面跳转逻辑实现

    1. 工程地址:https://github.com/digitalClass/web_page 网站发布地址: http://115.28.30.25:8029/ 2. 今天遇到一个小问题, 同组的 ...

  9. Html中设置访问页面不在后进行其他页面跳转

    Html中设置访问页面不在后进行其他页面跳转 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

随机推荐

  1. 编写Python脚本进行ARP欺骗

    1.系统环境:Ubuntu 16.04 Python版本:2.7 2.攻击机器:Ubuntu(192.16.0.14) 目标机器:Windows 7(192.168.0.9) 网关:(192.168. ...

  2. 20165231 预备作业二:学习基础和C语言基础调查

    微信文章感想 读了娄老师微信公众号中的文章,老师给我们的启示首先就是要坚持,万事开头难,但是只要肯坚持就一定会有所成就,不管是学习还是生活方面.其中最有触动的就是减肥了,是我三四年来一直难以完成的目标 ...

  3. Linux运行时I/O设备的电源管理框架【转】

    转自:https://www.cnblogs.com/coryxie/archive/2013/03/01/2951243.html 本文介绍Linux运行时I/O设备的电源管理框架.属于Linux内 ...

  4. java官网真不错

    要用到一个软件,打开时说没找到javaw,然后大家说这是因为没安装java,就按着链接去了java官网 https://www.java.com/zh_CN/download/faq/remove_o ...

  5. requests库入门10-超时,错误与异常

    在实际发布到生产上的接口测试代码,都会加上超时的设置,当服务器超过一定时间没有响应,会报出超时异常.因为requests会自动等待响应.如果不加上超时的设置,可能脚本会一直卡在那里.. 超时设置在请求 ...

  6. MySQL之路 ——2、步履维艰的建表

    1.首先,在windows下,不区分大小写.Linux下可能要区分,具体参考下面文章 mysql表名忽略大小写问题记录 2.用command line client 每句以分号结尾. 3.Navica ...

  7. oracle监控

    python代码 #!/usr/bin/env python # -*- coding: UTF-8 -*- import subprocess import sys import re def ru ...

  8. python装饰器的4种类型:函数装饰函数、函数装饰类、类装饰函数、类装饰类

    一:函数装饰函数 def wrapFun(func): def inner(a, b): print('function name:', func.__name__) r = func(a, b) r ...

  9. ThreadLocal与Synchronized区别

    ThreadLocal和Synchonized都用于解决多线程并发访问他们两者的区别:synchronized是利用锁的机制,使变量或代码块在某一时该只能被一个线程访问,而ThreadLocal为每一 ...

  10. Redis高级特性介绍及实例分析

    转自:http://www.jianshu.com/p/af7043e6c8f9   Redis基础类型回顾 String Redis中最基本,也是最简单的数据类型.注意,VALUE既可以是简单的St ...