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 ...
随机推荐
- 华大单片机开发板HC32L13X上手入门
HC32L136开发板(如下图所示)分为板载调试模块(左半部分)和MCU开发电路(右半部分).二者中间通过邮票孔相连,如果将板子从中间掰开,板载调试模块就可以当一个CMSIS-DAP的仿真器来使用.此 ...
- DjangoRestFramework 学习之restful规范 APIview 解析器组件 Postman等
DjangoRestFramework学习一之restful规范.APIview.解析器组件.Postman等 本节目录 一 预备知识 二 restful规范 三 DRF的APIView和解析器组件 ...
- 2. Scala变量
2.1 变量是程序的基本组成单位 举一个简单的例子 object boke_demo01 { def main(args: Array[String]): Unit = { var a: Int = ...
- gdb调试用法
目录 一.gdb功能简介 二.gdb使用前置条件:编译时加入debug信息. 三.gdb最常见的几个用法: 1.gdb的启动,加载程序: 2.调试正在运行的程序: 3. 查core: 四.gdb常用命 ...
- eclipse 遇到的问题及解决思路
招黑的我和eclipse相冲,莫名其妙出现一堆问题.现在打算不定时更新把我遇到的问题更上来,解决方法也附上,不一定适用以后遇到的问题,可以是提供一种解决问题的思路. 1.eclipse配置问题(jar ...
- HTML+CSS+JavaScript-案例
CSS-flex弹性布局案例1: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <met ...
- numpy(二)
通用函数: np.add 加 np.subtract 减 np.multiply 乘 np.divide 除 np.floor_divide 地板乘除法,取商 np.power 指数运算 ...
- MongoDB操作集
官网 https://www.mongodb.com/download-center#community 基本资料: http://www.runoob.com/mongodb/mongodb-int ...
- .net EF之CodeFirst代码先行(转)
为了支持以设计为中心的开发流程,EF还更多地支持以代码为中心 (code-centric) ,我们称为代码优先的开发,代码优先的开发支持更加优美的开发流程,它允许你在不使用设计器或者定义一个 XML ...
- 工具方法: jQuery.方法() $.extend (小计)
$.extend(布尔值,目标对象,合并对象,……) 布尔值 : true,深拷贝(递归拷贝) false,浅拷贝(非递归拷贝) ...