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. C语言复习0_准备工作

    前言: 第一次接触C语言是大一下学期的时候,2013年上半年,那个时候的开发工具还是VS C++,今天了解了一下,常用的开发工具变成了CodeBlocks.决定趁着毕业到入职这一段CD时间,拾起这门语 ...

  2. Python练手例子(7)

    37.对10个数进行排序. 程序分析:可以利用选择法,即从后9个比较过程中,选择一个最小的与第一个元素交换,下次类推,即用第二个元素与后8个进行比较,并进行交换. #python 3.7 if __n ...

  3. 外网访问VMware虚拟机

      目的: 主机上安装了VMware,VMware上安装了Linux虚拟机(我安装的是Centos7).我想让虚拟机向外提供Web服务.本文记录如何让我的主机和外网用户可以访问VM虚拟机上的Web. ...

  4. CodeForces 1143A The Doors

    The Doors 签到题 #include <iostream> using namespace std; int a[200005]; int main() { int n; scan ...

  5. 6. Scala面向对象编程(基础部分)

    6.1 基本介绍 6.1.1 Scala语言是面向对象的 1) Java时面向对象的编程语言,由于历史原因,Java中海存在着非面向对象的内容:基本类型,null,静态方法等 2) Scala语言来自 ...

  6. JAVA RPC (六) 之thrift反序列化RPC消息体

    我们来看一下服务端的简单实现,直接上thrift代码,很直观的来看一看thrift的server到底干了些什么 public boolean process(TProtocol in, TProtoc ...

  7. rpm和yum模拟安装

    在更新安装包之前,我们可能会想做一个测试运行,换句话说,模拟而不是实际安装更新的包,以确定在安装之前是否有任何需要处理的问题. 以测试更新openssh2为例: yum update openssh2 ...

  8. python练习题-day22

    1.编写程序, 编写一个学生类, 要求有一个计数器的属性, 统计总共实例化了多少个学生 class Student: count=0 def __init__(self,name,age,gender ...

  9. mysql高可用研究(一) 主从+MHA架构 (转)

    最近在研究mysql的高可用架构,自己想总结下常用的高可用方案都有哪些.有哪些优缺点以及应用的场景?搞得是头昏脑涨,天昏地暗,看了诸多资料,每次都觉得公说公有理婆说婆有理.其实嘛,大家说的都有一定的道 ...

  10. Django---请求、响应

    Django的请求和响应 一.客户端向服务器的请求简介 二.响应对象构造 回到顶部 一.客户端向服务器的请求简介 1.c-->s的传参的4中途径 提取的URL的特定部分,如/天气/北京/ 201 ...