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 ...
随机推荐
- IntelliJ IDEA 2017.2.6 x64 配置 tomcat 启动 maven 项目
IntelliJ IDEA 2017.2.6 x64 配置 tomcat 启动 maven 项目 1.确认 IDEA 是否启用了 tomcat 插件 2.添加 tomcat 选择 tomcat 存放路 ...
- ide phpStorm使用git的命令行工具
1.点击phpStorm左下角,点击terminal 2.发现是windows自带的cmd.exe,可以将其改为git的sh.exe 3.打开设置(File -> Settings -> ...
- [dev] 刷HHKP的一般流程及常见错误(多图慎点)
( 为什么打了个dev的tag?development不用键盘,难道用鼠标??) 嗯呐,我有个HHKP,你看: 好不好看? 脏不脏? 接下来讲一下,我是怎么刷它,要看完哝,不然拆坏了不要怪我. 本来我 ...
- Kafka: Exactly-once Semantics
https://www.confluent.io/blog/enabling-exactly-kafka-streams/ https://cwiki.apache.org/confluence/di ...
- nginx修改上传文件大小限制
问题: 项目上线,图片上传报413错误,找了半天,原来是nginx限制了上传大小 在nginx.conf的server的location中加client_max_body_size 10m;
- php 数据库乱码。。。php 移动临时文件
数据库乱码,三个位置 处理好不会乱码 第一前台,传到后台: 第二后台,传到数据库: 第三数据库,存入数据库: 详解 https://www.cnblogs.com/zhoujinyi/p/46188 ...
- 用vue怎么写点击保存之后的返回的代码?
点击完保存调用接口之后,如果使用 this.$router.go(-1); 返回到编辑页面,数据不会有更新,使用 this.$router.replace({ name: '信息展示', param ...
- numpy(四)
逻辑符 : == != < > <= >= x=np.array([1,3,5]) x<3 array([True,False,,False]) (2*x) == ...
- match 和 lastIndex 字符串检测差异
match .replace .search 这写不能识别特殊字符 indexOf .indexof 能识别特殊字符 str.lastIndexOf('a') > -1 // 通过lastInd ...
- 记录请求的耗时(拦截器、过滤器、aspect)
文章前言 记录控制器请求的耗时处理通常有三种实现方式,分别是:过滤器.拦截器.aspect:下文将逐一实现. 1.Filter 过滤器 1.1.方法说明 需要实现 Filter 类,主要涉及三个方法: ...