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，您可能會錯過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: 32

* 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等待更新中。。。