React-navigation 介绍

React Navigation 源于 React Native 社区对一个可扩展且易于使用的导航解决方案的需求,它完全使用 JavaScript 编写。

(如果按照官方文档配置,但是运行 react-native run-android 报错的话,请移步错误解决

安装

在你的 React Native 项目中安装 react-navigation 这个包(注意--save或者--save-dev一定要写正确,链接原生库是会根据package.json文件中的dependenciesdevDependencies的记录来链接所有需要链接的库

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,您可能会错过RCTLinkingIOSPodfile中的子规范,该默认情况下会安装在新的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 使用的更多相关文章

  1. React Native导航器Navigator

    React Native导航器Navigator 使用导航器可以让你在应用的不同场景(页面)间进行切换.导航器通过路由对象来分辨不同的场景.利用renderScene方法,导航栏可以根据指定的路由来渲 ...

  2. 【React Native】React Native项目设计与知识点分享

    闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...

  3. 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 ...

  4. React Native之React速学教程(下)

    概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习Reac ...

  5. React Native之React速学教程(中)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  6. React Native之React速学教程(上)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  7. React Native之React Navigation踩坑

    自动重装系统之后,已经很长一段时间没有来写React Native了,今天空闲之余,决定重新配置React Native的开发环境,继续踩坑... React Native的开发环境配置狠简单,只要依 ...

  8. react native 导航器 Navigator 简单的例子

    最近学习react native 是在为全栈工程师而努力,看网上把react native说的各种好,忍不住学习了一把.总体感觉还可以,特别是可以开发android和ios这点非常厉害,刚开始入门需要 ...

  9. 小谈React、React Native、React Web

    React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...

  10. [React Native]升级React Native版本

    React Native正式版本还没发布,但是小版本基本上每个月都更新1-2次.9月11号又更新了0.33版本,其中有两个增强功能正好是项目中用到的. 添加Android6.0权限验证API Add ...

随机推荐

  1. Kotlin从入门到放弃

    1.eclipse kotlin安装: http://blog.csdn.net/u014134488/article/details/50684922 2.Android Studio kotlin ...

  2. windows安装虚拟机(VMware)

    一.安装虚拟机 1.打开安装包 2.接受协议 3.选择安装位置 4.按照提示下一步即可 5.完成安装 二.安装带有GUI的Redhat7系统 1.选择自定义安装 2.默认虚拟机硬件兼容 3.选择稍后安 ...

  3. java基础 第六章课后习题

    1.说明循环结构中break语句和continue语句的区别. 在循环结构中 break语句 是结束程序运行. continue语句是结束本句程序  不是结束程序. 2.使用for循环结构实现,从键盘 ...

  4. Lombok 介绍

    Lombok使用 介绍 在项目中使用Lombok可以减少很多重复代码的书写.比如说getter/setter/toString等方法的编写. IDEA中的安装 打开IDEA的Setting –> ...

  5. 阿里云入坑指南&&nodejs 安装配置

    买了阿里云1G1核1M的机器(800元,3年) 登录阿里云-实例-选择实例所在地区-重置密码 用公网IP ssh连接 #升级CentOS yum -y update #安装or更新组件 yum -y ...

  6. box-shodow的使用

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  7. 玩转Vuejs--数组监听

    Vue中对数据的监听主要是依靠Object.defineProperty来实现的,这种实现主要是针对key/value形式的对象,对数组中值的变化是无能为力的,那么该如何对数组中的数据进行监听呢,下面 ...

  8. 前端 CSS语法

    每个CSS样式由两个组成部分: 1.选择器 2.声明 声明由属性和值组成,每个声明之后用分号结束.

  9. 一文讲透静电放电(ESD)保护(转发)

    一直想给大家讲讲ESD的理论,很经典.但是由于理论性太强,任何理论都是一环套一环的,如果你不会画鸡蛋,注定了你就不会画大卫. 先来谈静电放电(ESD: Electrostatic Discharge) ...

  10. JAVA中使用alibaba fastjson实现JSONObject、Object、Json字符串的转换

    JAVA中使用alibaba fastjson实现JSONObject.Object.Json字符串的转换 Object转JSON字符串:String jsonStr = JSONObject.toJ ...