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 ...
随机推荐
- C语言复习0_准备工作
前言: 第一次接触C语言是大一下学期的时候,2013年上半年,那个时候的开发工具还是VS C++,今天了解了一下,常用的开发工具变成了CodeBlocks.决定趁着毕业到入职这一段CD时间,拾起这门语 ...
- Python练手例子(7)
37.对10个数进行排序. 程序分析:可以利用选择法,即从后9个比较过程中,选择一个最小的与第一个元素交换,下次类推,即用第二个元素与后8个进行比较,并进行交换. #python 3.7 if __n ...
- 外网访问VMware虚拟机
目的: 主机上安装了VMware,VMware上安装了Linux虚拟机(我安装的是Centos7).我想让虚拟机向外提供Web服务.本文记录如何让我的主机和外网用户可以访问VM虚拟机上的Web. ...
- CodeForces 1143A The Doors
The Doors 签到题 #include <iostream> using namespace std; int a[200005]; int main() { int n; scan ...
- 6. Scala面向对象编程(基础部分)
6.1 基本介绍 6.1.1 Scala语言是面向对象的 1) Java时面向对象的编程语言,由于历史原因,Java中海存在着非面向对象的内容:基本类型,null,静态方法等 2) Scala语言来自 ...
- JAVA RPC (六) 之thrift反序列化RPC消息体
我们来看一下服务端的简单实现,直接上thrift代码,很直观的来看一看thrift的server到底干了些什么 public boolean process(TProtocol in, TProtoc ...
- rpm和yum模拟安装
在更新安装包之前,我们可能会想做一个测试运行,换句话说,模拟而不是实际安装更新的包,以确定在安装之前是否有任何需要处理的问题. 以测试更新openssh2为例: yum update openssh2 ...
- python练习题-day22
1.编写程序, 编写一个学生类, 要求有一个计数器的属性, 统计总共实例化了多少个学生 class Student: count=0 def __init__(self,name,age,gender ...
- mysql高可用研究(一) 主从+MHA架构 (转)
最近在研究mysql的高可用架构,自己想总结下常用的高可用方案都有哪些.有哪些优缺点以及应用的场景?搞得是头昏脑涨,天昏地暗,看了诸多资料,每次都觉得公说公有理婆说婆有理.其实嘛,大家说的都有一定的道 ...
- Django---请求、响应
Django的请求和响应 一.客户端向服务器的请求简介 二.响应对象构造 回到顶部 一.客户端向服务器的请求简介 1.c-->s的传参的4中途径 提取的URL的特定部分,如/天气/北京/ 201 ...