react-native 导航器 react-navigation 3.x 使用
React-navigation 介绍
React Navigation 源于 React Native 社区对一个可扩展且易于使用的导航解决方案的需求,它完全使用 JavaScript 编写。
(如果按照官方文档配置,但是运行 react-native run-android 报错的话,请移步错误解决)
安装
在你的 React Native 项目中安装 react-navigation 这个包(注意--save或者--save-dev一定要写正确,链接原生库是会根据package.json
文件中的dependencies
和devDependencies的记录来链接所有需要链接的库
)
yarn add react-navigation
# 或者使用npm
# npm install --save react-navigation
然后安装 react-native-gesture-handler ,如过你正在使用 Expo ,那么你可以跳过此步骤,因为他包含在SDK中,否则
yarn add react-native-gesture-handler
# 或者使用npm
# npm install --save react-native-gesture-handler
链接所有原生库(注意一些老的教程和文档可能会提到rnpm link
命令,此命令已过期不再使用,由下面这个命令代替)
react-native link
此时IOS就不需要其他步骤了,要完成针对Android的react-native-gesture-handler的安装,请务必对 MainActivity.java 内容进行必要的修改
package com.reactnavigation.example; import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; public class MainActivity extends ReactActivity { @Override
protected String getMainComponentName() {
return "Example";
} + @Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ @Override
+ protected ReactRootView createRootView() {
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
+ }
+ };
+ }
}
混合iOS应用程序(仅针对RN项目跳过)
如果您在混合应用程序(一个同时具有Swift / ObjC和React Native部分的iOS应用程序)中使用React Navigation,您可能会错过RCTLinkingIOS
Podfile中的子规范,该默认情况下会安装在新的RN项目中。要添加此项,请确保您的Podfile如下所示:
pod 'React', :path => '../node_modules/react-native', :subspecs => [
. . . // other subspecs
'RCTLinkingIOS',
. . .
]
由于我的项目是基于rn0.55.4版本,react-navigation说0.50以上就可以用,但是安卓无法使用
错误解决
首先请允许我使用二号标题来吐槽一下,官方文档说rn 0.50.x版本以上都是没问题的,但是按照文档还是报错,现在大部分新版本的库都需要升级gradle版本,理论上大部分安装新版本的第三方库,比如
react-native-vector-icons ,都是依赖新版本了(现在rn版本是57),貌似57版本已经升级了gradle,就这样吧。
以下是错误以及解决方法。
错误关键字
Could not find method compileOnly() for arguments [com.facebook.react:react-native:+] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.
完整报错信息
FAILURE: Build failed with an exception. * Where:
Build file '/Users/mao/Desktop/lzbk/mpx/node_modules/react-native-gesture-handler/android/build.gradle' line: * What went wrong:
A problem occurred evaluating project ':react-native-gesture-handler'.
> Could not find method compileOnly() for arguments [com.facebook.react:react-native:+] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler. * Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
解决
1.改变配置android/build.gradle
。
buildscript {
repositories {
jcenter()
google() // ++
}
dependencies {
classpath 'com.android.tools.build:gradle:3.1.4'// 修改版本 // NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
} allprojects {
repositories {
mavenLocal()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
google() // ++
}
}
打开 ...\node_modules\react-native-vector-icons\android\build.gradle ,你会发现classpath中的gradle版本是3.1.4,这就是我们需要进行此更改的原因。
2.在你的android项目中,打开 android/gradle/wrapper/gradle-wrapper.properties ,修改distributionUrl:
distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip
由于此库依赖于3.1.4之上的gradle版本,所以更新gradle版本。
现在重新运行 react-native run-android 就可以了(注意,这时候会下载新版本的gradle,会需要一段时间)
更多api等待更新中。。。
react-native 导航器 react-navigation 3.x 使用的更多相关文章
- React Native导航器Navigator
React Native导航器Navigator 使用导航器可以让你在应用的不同场景(页面)间进行切换.导航器通过路由对象来分辨不同的场景.利用renderScene方法,导航栏可以根据指定的路由来渲 ...
- 【React Native】React Native项目设计与知识点分享
闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...
- React Native & react-native-web-player & React Native for Web
React Native & react-native-web-player & React Native for Web https://github.com/dabbott/rea ...
- React Native之React速学教程(下)
概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习Reac ...
- React Native之React速学教程(中)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- React Native之React速学教程(上)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- React Native之React Navigation踩坑
自动重装系统之后,已经很长一段时间没有来写React Native了,今天空闲之余,决定重新配置React Native的开发环境,继续踩坑... React Native的开发环境配置狠简单,只要依 ...
- react native 导航器 Navigator 简单的例子
最近学习react native 是在为全栈工程师而努力,看网上把react native说的各种好,忍不住学习了一把.总体感觉还可以,特别是可以开发android和ios这点非常厉害,刚开始入门需要 ...
- 小谈React、React Native、React Web
React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...
- [React Native]升级React Native版本
React Native正式版本还没发布,但是小版本基本上每个月都更新1-2次.9月11号又更新了0.33版本,其中有两个增强功能正好是项目中用到的. 添加Android6.0权限验证API Add ...
随机推荐
- Kotlin从入门到放弃
1.eclipse kotlin安装: http://blog.csdn.net/u014134488/article/details/50684922 2.Android Studio kotlin ...
- windows安装虚拟机(VMware)
一.安装虚拟机 1.打开安装包 2.接受协议 3.选择安装位置 4.按照提示下一步即可 5.完成安装 二.安装带有GUI的Redhat7系统 1.选择自定义安装 2.默认虚拟机硬件兼容 3.选择稍后安 ...
- java基础 第六章课后习题
1.说明循环结构中break语句和continue语句的区别. 在循环结构中 break语句 是结束程序运行. continue语句是结束本句程序 不是结束程序. 2.使用for循环结构实现,从键盘 ...
- Lombok 介绍
Lombok使用 介绍 在项目中使用Lombok可以减少很多重复代码的书写.比如说getter/setter/toString等方法的编写. IDEA中的安装 打开IDEA的Setting –> ...
- 阿里云入坑指南&&nodejs 安装配置
买了阿里云1G1核1M的机器(800元,3年) 登录阿里云-实例-选择实例所在地区-重置密码 用公网IP ssh连接 #升级CentOS yum -y update #安装or更新组件 yum -y ...
- box-shodow的使用
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...
- 玩转Vuejs--数组监听
Vue中对数据的监听主要是依靠Object.defineProperty来实现的,这种实现主要是针对key/value形式的对象,对数组中值的变化是无能为力的,那么该如何对数组中的数据进行监听呢,下面 ...
- 前端 CSS语法
每个CSS样式由两个组成部分: 1.选择器 2.声明 声明由属性和值组成,每个声明之后用分号结束.
- 一文讲透静电放电(ESD)保护(转发)
一直想给大家讲讲ESD的理论,很经典.但是由于理论性太强,任何理论都是一环套一环的,如果你不会画鸡蛋,注定了你就不会画大卫. 先来谈静电放电(ESD: Electrostatic Discharge) ...
- JAVA中使用alibaba fastjson实现JSONObject、Object、Json字符串的转换
JAVA中使用alibaba fastjson实现JSONObject.Object.Json字符串的转换 Object转JSON字符串:String jsonStr = JSONObject.toJ ...