效果图:

进入工作目录,运行

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. QR 编码原理(三)

    一.日本汉字(KANJI)是两个字节表示的字符码,编码的方式是将其转换为13字节的二进制码制. 转换步骤为: 1.对于JIS值为8140(hex) 到9FFC(hex)之间字符: a)将待转换的JIS ...

  2. 快速了解Hash算法

    hash hashcode java  1.hash 2.hash算法 1.hash Hash,一般翻译做“散列”,也有直接音译为“哈希”的,就是把任意长度的输入(又叫做预映射pre-image)通过 ...

  3. FlowNet2.0 安装指南

     \(安装环境: \color{red}{Ubuntu16.04 + CUDA8.0 + cuDNN5.0}\) 安装 CUDA CUDA 安装准备 CUDA 官方安装文档 首先查看是否电脑具有支持 ...

  4. linux驱动 之 module_init解析 (上)【转】

    转自:https://blog.csdn.net/Richard_LiuJH/article/details/45669207 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...

  5. 转-JavaWeb三大组件之Listener监听器

    JavaWeb三大组件之Listener监听器一.概述1,它是一个接口,内容由我们来实现 2,它需要注册,例如注册在按钮上 3,监听器中的方法,会在特殊事件发生时被调用 二.JavaWeb中的监听器1 ...

  6. python操作三大主流数据库(5)python操作mysql⑤使用Jinja2模板提取优化页面展示

    python操作mysql⑤使用Jinja2模板提取优化页面展示 在templates目录下的index.html.cat.html等页面有一些共同的元素,代码比较冗余可以使用模板提取公共代码,在各网 ...

  7. Springboot:开发时工程启动慢

    个人的解决办法是删除workspace中的histor 然后重启Eclipse,发现一切正常.

  8. Linux学习之CentOS(三)--初识linux的文件系统以及用户组等概念

    Linux学习之CentOS(三)--初识linux的文件系统以及用户组等概念 进入到了Linux学习之CentOS第三篇了,这篇文章主要记录下对linux文件系统的初步认识,以及用户组.用户权限.文 ...

  9. cocos2dx-lua 延迟调用函数和定时器

    下面是cocos官方的方法. function performWithDelay(node, callback, delay) local delay = cc.DelayTime:create(de ...

  10. 【Shared Server Mode】测试调整shared_servers参数对数据库的影响

    本文来源于:secooler  的 <[Shared Server Mode]测试调整shared_servers参数对数据库的影响> 关于Shared Server模式的配置方法请参见文 ...