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: 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,會需要一段時間)