React Native-路由跳转
搭建完RN开发环境后(搭建方式可查看https://www.cnblogs.com/luoyihao/p/11178377.html),要实现多个页面之间的跳转。
1.这时需要安装react-navigation(在此之前的Navigator和ex-Navigation已经废弃),使用yarn add react-navigation命令进行安装。
2.react-navigation依赖于react-native-gesture-handler组件,因此也需要使用yarn add react-native-gesture-handler命令进行安装。
3.两个组件安装成功后,在index.js(入口文件,有可能是index.android.js或index.ios.js)注册一个App组件,引用自setup.js。
4.在setup.js中导入createStackNavigator, createAppContainer两个函数和两个页面。
import { createStackNavigator, createAppContainer } from "react-navigation";
import { Login } from "./js/pages/login";
import { ScanDevice } from "./js/pages/scanDevice";
5.用createStackNavigator封装好两个页面的路由和标题的配置,设置好初始路由。
const AppNavigator = createStackNavigator({
Login: {
screen:Login,
navigationOptions: {
title: '冷链物流助手',
headerTitleStyle:{
textAlign: 'center',
flex:1,
}
}
},
ScanDevice: {
screen:ScanDevice,
navigationOptions: {
title: '扫描设备',
headerTitleStyle:{
textAlign: 'center',
marginLeft:-25,
flex:1,
}
}
},
},{
initialRouteName: 'Login'
});
6.将配置好的AppNavigator再用另一个函数createAppContainer封装,然后以类的组件的形式导出。
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
7.运行react-native run-android,如有报错则查询谷歌一步步解决。若出现Task :react-native-gesture-handler:compileDebugJavaWithJavac FAILED报错,则按照https://www.cnblogs.com/luoyihao/p/11222534.html解决。
React Native-路由跳转的更多相关文章
- React native路由跳转navigate、push、replace的区别
由于没有系统的去学习RN,对路由跳转了解不多,只是跟着项目在做,抽点时间简单学习一下RN路由跳转方法区别,总结如下: 如上图,外部是一个栈容器,此时A页面在最底部,navigate到B页面,为什么此时 ...
- [RN] React Native 滚动跳转到指定位置
React Native 滚动跳转到指定位置 一.结构 <ScrollView horizontal={true} ref={(view) => { this.myScrollView = ...
- [RN] React Native FlatList跳转到顶部/底部
React Native FlatList跳转到顶部/底部 核心代码如下: <ScrollView showsVerticalScrollIndicator={false} contentCon ...
- react native 页面跳转
React Native目前有几个内置的导航器组件,一般来说我们首推Navigator.它使用纯JavaScript实现了一个导航栈,因此可以跨平台工作 场景简单来说其实就是一个全屏的React组件. ...
- react中路由跳转push与replace的区别
路由跳转,replace / push 区别 push: a-b-c 可以回到上一级 例: this.props.history.push('路由地址') replace: a-b-c 回不到上一级 ...
- react native 1跳2 2跳3 3跳4 4pop回2
网上有介绍导航的很多了 就不一一说了 直接说一个小功能 popToRoute pop回指定页面 第一次写 组织能力不是特别好 直接贴代码 例如 我们有四个页面 从第四个pop到第二个页面 先 ...
- react native jpush跳转页面不成功解决方法
在点击事件时加入如下红色代码即可 import JPushModule from 'jpush-react-native'; ... componentDidMount() { // 新版本必需写回调 ...
- 关于react native 路由传值及回调方法的理解
提示:本路由需要通过 this.props.navigation.state.params 获取上一路由传过来的值
- React Native学习(三)—— 使用导航器Navigation跳转页面
本文基于React Native 0.52 参考文档https://reactnavigation.org/docs/navigators/navigation-prop 一.基础 1.三种类型 Ta ...
- React Native之使用导航器跳转页面(react-navigation)
react-navigation是一个导航库,要使用react-navigation来实现跳转页面,首先得在项目中安装此库,由于Yarn是Facebook提供的替代npm的工具,可以加速node模块的 ...
随机推荐
- kuangbin专题 专题二 搜索进阶 哈密顿绕行世界问题 HDU - 2181
题目链接:https://vjudge.net/problem/HDU-2181 题意:一个规则的实心十二面体,它的 20个顶点标出世界著名的20个城市,你从一个城市出发经过每个城市刚好一次后回到出发 ...
- Spring Cloud 之 Hystrix.
一.概述 在微服务架构中,我们将系统拆分成了很多服务单元,各单元的应用间通过服务注册与订阅的方式互相依赖.由于每个单元都在不同的进程中运行,依赖通过远程调用的方式执行,这样就有可能因为网络原因或是依 ...
- node调试工具--nodemon使用简介
这个工具和node-supervisor基本上是一致的,但是其功能比较强大,个人觉得在开发环境还是用 nodemon,因为配置比较方便,文档也很清晰.所以这里先主要讲 nodemon. nodemon ...
- Java集合类的概述
前述 复习一下Java中的集合类,是面试笔试中常考察的一个点,特地做的整理. 什么是集合类? 集合类,也叫容器类.Java集合类可以用来存储数量庞大的对象. 我们和数组进行对比: 数组:存储基本数据类 ...
- Web API POST [FromBody] string value 接受参数
网上看到很多关于这这个问题的解决方案,但是都不正确,我也恰巧遇到这个问题,所有把正确的解决方案写出来,希望给后来人参考,如有不同意见欢迎指正 namespace WebApi.Controllers ...
- c++小游戏——五子棋
#include<iostream> #include<iomanip> #include<cstring> using namespace std; const ...
- Java面试题必备知识之ThreadLocal
老套路,先列举下关于ThreadLocal常见的疑问,希望可以通过这篇学习笔记来解决这几个问题: ThreadLocal是用来解决什么问题的? 如何使用ThreadLocal? ThreadLocal ...
- 个人永久性免费-Excel催化剂功能第104波-批量选择多种类型的图形对象
在Excel的日常操作过程中,选择绝对是一个高频的操作,之前开发过一些快速选择单元格区域的辅助功能,除了单元格区域,Excel强大之处在于,类似PhotoShop那般可以存放多种图形,并且有图层先后顺 ...
- Excel催化剂开源第5波-任务窗格在OFFICE2013中新建文档不能同步显示问题解决
在OFFICE2013及之后,使用了单文档界面技术,不同于以往版本可以共享任务空格.功能区.所以当开发任务窗格时,需要考虑到每一个工作薄都关联一个任务窗格. 背景介绍 单文档界面摘录官方定义如下:对 ...
- Java 虚拟机部分面试题
Java虚拟机部分的面试内容包括三部分:GC.类加载机制以及内存 Java内存区域 JVM内存分为哪几部分,这些部分分别都存储哪些数据? 线程隔离的数据区:程序计数器.Java虚拟机栈.本地方法栈. ...