react-native-navigation的迁移库

docs-Installing.mdx 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
  1. ---
  2. id: installing
  3. title: Installation
  4. sidebar_label: Installation
  5. ---
  6. ## Requirements
  7. * node >= 8
  8. * react-native >= 0.51
  9. ## npm
  10. * `npm install --save react-native-navigation`
  11. ## Installing with `react-native link`
  12. If you're using RN 0.60 or higher, you can link RNN automatically with react-native link.
  13. Unlike most other libraries, react-native-navigation requires you to make a few changes to native files. To make all the necessary changes, run
  14. ```react-native link react-native-navigation```
  15. in your project's root folder. Make sure to commit the changes introduced by the link script.
  16. If the link script completed successfully, you're good to go! If one of the steps failed, you'll need to complete the relevant step in the manual installation steps bellow.
  17. ## Displaying the app root
  18. ### Update index.js file
  19. `index.js` is typically used as an entry point into the app. It's first parsed and executed by the JS engine, therefore we'll want to show our UI from there.
  20. The following diff demonstrates changes needed to be made to `index.js`, initialized by `react-native init`.
  21. ```diff
  22. +import { Navigation } from "react-native-navigation";
  23. -import {AppRegistry} from 'react-native';
  24. import App from "./App";
  25. -import {name as appName} from './app.json';
  26. -AppRegistry.registerComponent(appName, () => App);
  27. +Navigation.registerComponent('com.myApp.WelcomeScreen', () => App);
  28. +Navigation.events().registerAppLaunchedListener(() => {
  29. + Navigation.setRoot({
  30. + root: {
  31. + stack: {
  32. + children: [
  33. + {
  34. + component: {
  35. + name: 'com.myApp.WelcomeScreen'
  36. + }
  37. + }
  38. + ]
  39. + }
  40. + }
  41. + });
  42. +});
  43. ```
  44. ___
  45. ## Manual Installation
  46. If installation with react-native link did not work, follow the manual installation steps below.
  47. ### iOS
  48. > Make sure your Xcode is updated. We recommend editing `.h` and `.m` files in Xcode as the IDE will usually point out common errors.
  49. #### Installation with CocoaPods
  50. Projects generated using newer versions of react-native use CocoaPods by default. In that case it's easier to install react-native-navigation using CocoaPods.
  51. 1. Update your `Podfile`:
  52. **If you're upgrading to v5 from a previous RNN version**, make sure to remove manual linking of RNN
  53. ```diff
  54. platform :ios, '9.0'
  55. require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
  56. target 'YourApp' do
  57. # Pods for YourApp
  58. pod 'React', :path => '../node_modules/react-native/'
  59. pod 'React-Core', :path => '../node_modules/react-native/React'
  60. pod 'React-DevSupport', :path => '../node_modules/react-native/React'
  61. pod 'React-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'
  62. pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  63. pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  64. pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  65. pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  66. pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  67. pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  68. pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  69. pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  70. pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  71. pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'
  72. pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  73. pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  74. pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  75. pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  76. pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
  77. pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  78. pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  79. pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
  80. - pod 'ReactNativeNavigation', :podspec => '../node_modules/react-native-navigation/ReactNativeNavigation.podspec'
  81. use_native_modules!
  82. end
  83. ```
  84. 2. `cd ios && pod install`
  85. #### Native Installation
  86. If all else fails, we can always try and install the hardcore way:
  87. 1. In Xcode, in Project Navigator (left pane), right-click on the `Libraries` > `Add files to [project name]`. Add `node_modules/react-native-navigation/lib/ios/ReactNativeNavigation.xcodeproj` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking)).
  88. 2. In Xcode, in Project Navigator (left pane), click on your project (top), then click on your *target* row (on the "project and targets list", which is on the left column of the right pane) and select the `Build Phases` tab (right pane). In the `Link Binary With Libraries` section add `libReactNativeNavigation.a` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-2)).
  89. a. If you're seeing an error message in Xcode such as:
  90. ```
  91. 'ReactNativeNavigation/ReactNativeNavigation.h' file not found.
  92. ```
  93. You may also need to add a Header Search Path: ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-3)).
  94. ```objectivec
  95. $(SRCROOT)/../node_modules/react-native-navigation/lib/ios
  96. ```
  97. 3. In Xcode, you will need to edit this file: `AppDelegate.m`. This function is the main entry point for your app:
  98. ```objectivec
  99. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { ... }
  100. ```
  101. Its content should look like this:
  102. ```objectivec
  103. #import "AppDelegate.h"
  104. #import <React/RCTBundleURLProvider.h>
  105. #import <React/RCTRootView.h>
  106. #import <ReactNativeNavigation/ReactNativeNavigation.h>
  107. @implementation AppDelegate
  108. -(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  109. {
  110. NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  111. [ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
  112. return YES;
  113. }
  114. @end
  115. ```
  116. a. If, in Xcode, you see the following error message in `AppDelegate.m` next to `#import "RCTBundleURLProvider.h"`:
  117. ```
  118. ! 'RCTBundleURLProvider.h' file not found
  119. ```
  120. This is because the `React` scheme is missing from your project. You can verify this by opening the `Product` menu and the `Scheme` submenu.
  121. To make the `React` scheme available to your project, run `npm install -g react-native-git-upgrade` followed by `react-native-git-upgrade`. Once this is done, you can click back to the menu in Xcode: `Product -> Scheme -> Manage Schemes`, then click '+' to add a new scheme. From the `Target` menu, select "React", and click the checkbox to make the scheme `shared`. This should make the error disappear.
  122. b. If, in Xcode, you see the following warning message in `AppDelegate.m` next to `#import "@implementation AppDelegate"`:
  123. ```
  124. Class 'AppDelegate' does not conform to protocol 'RCTBridgeDelegate'
  125. ```
  126. You can remove `RCTBridgeDelegate` from this file: `AppDelegate.h`:
  127. ```diff
  128. - #import <React/RCTBridgeDelegate.h>
  129. - @interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
  130. + @interface AppDelegate : UIResponder <UIApplicationDelegate>
  131. ...
  132. ```
  133. ### Android
  134. > Make sure your Android Studio installation is up to date. We recommend editing `gradle` and `java` files in Android Studio as the IDE will suggest fixes and point out errors, this way you avoid most common pitfalls.
  135. #### 1 Update `android/build.gradle`:
  136. ```diff
  137. buildscript {
  138. ext {
  139. - minSdkVersion = 16
  140. + minSdkVersion = 19 // Or higher
  141. compileSdkVersion = 26
  142. targetSdkVersion = 26
  143. supportLibVersion = "26.1.0"
  144. + RNNKotlinVersion = "1.3.61" // Or any version above 1.3.x
  145. + RNNKotlinStdlib = "kotlin-stdlib-jdk8"
  146. }
  147. repositories {
  148. google()
  149. jcenter()
  150. + mavenLocal()
  151. + mavenCentral()
  152. }
  153. dependencies {
  154. + classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.61" // Or whatever Kotlin version you've specified above
  155. + classpath 'com.android.tools.build:gradle:3.5.3' // Or higher
  156. - classpath 'com.android.tools.build:gradle:2.2.3'
  157. }
  158. }
  159. allprojects {
  160. repositories {
  161. + google()
  162. mavenLocal()
  163. jcenter()
  164. maven {
  165. // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
  166. url "$rootDir/../node_modules/react-native/android"
  167. }
  168. - maven {
  169. - url 'https://maven.google.com/'
  170. - name 'Google'
  171. - }
  172. + maven { url 'https://jitpack.io' }
  173. }
  174. }
  175. ```
  176. #### 2 Update `MainActivity.java`
  177. `MainActivity.java` should extend `com.reactnativenavigation.NavigationActivity` instead of `ReactActivity`.
  178. This file is located in `android/app/src/main/java/com/<yourproject>/MainActivity.java`.
  179. ```diff
  180. -import com.facebook.react.ReactActivity;
  181. +import com.reactnativenavigation.NavigationActivity;
  182. -public class MainActivity extends ReactActivity {
  183. +public class MainActivity extends NavigationActivity {
  184. - @Override
  185. - protected String getMainComponentName() {
  186. - return "yourproject";
  187. - }
  188. }
  189. ```
  190. If you have any **react-native** related methods, you can safely delete them.
  191. #### 3 Update `MainApplication.java`
  192. This file is located in `android/app/src/main/java/com/<yourproject>/MainApplication.java`.
  193. ```diff
  194. ...
  195. import android.app.Application;
  196. import com.facebook.react.ReactApplication;
  197. import com.facebook.react.ReactNativeHost;
  198. import com.facebook.react.ReactPackage;
  199. import com.facebook.react.shell.MainReactPackage;
  200. import com.facebook.soloader.SoLoader;
  201. +import com.reactnativenavigation.NavigationApplication;
  202. +import com.reactnativenavigation.react.NavigationReactNativeHost;
  203. -public class MainApplication extends Application implements ReactApplication {
  204. +public class MainApplication extends NavigationApplication {
  205. private final ReactNativeHost mReactNativeHost =
  206. - new ReactNativeHost(this) {
  207. + new NavigationReactNativeHost(this) {
  208. @Override
  209. public boolean getUseDeveloperSupport() {
  210. return BuildConfig.DEBUG;
  211. }
  212. @Override
  213. protected List<ReactPackage> getPackages() {
  214. @SuppressWarnings("UnnecessaryLocalVariable")
  215. List<ReactPackage> packages = new PackageList(this).getPackages();
  216. // Packages that cannot be autolinked yet can be added manually here, for example:
  217. // packages.add(new MyReactNativePackage());
  218. return packages;
  219. }
  220. @Override
  221. protected String getJSMainModuleName() {
  222. return "index";
  223. }
  224. };
  225. @Override
  226. public ReactNativeHost getReactNativeHost() {
  227. return mReactNativeHost;
  228. }
  229. @Override
  230. public void onCreate() {
  231. super.onCreate();
  232. - SoLoader.init(this, /* native exopackage */ false);
  233. initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  234. }
  235. }
  236. ```
  237. ### App root
  238. Now that you're done, don't forget to update the `index.js` file, as [shown above](#update-indexjs-file).
  239. ## Troubleshooting
  240. ### Build app with gradle command
  241. **prefered solution** - The RNN flavor you would like to build is specified in `app/build.gradle`. Therefore in order to compile only that flavor, instead of building your entire project using `./gradlew assembleDebug`, you should instruct gradle to build the app module: `./gradlew app:assembleDebug`. The easiest way is to add a package.json command to build and install your debug Android APK .
  242. ```
  243. "scripts": {
  244. ...
  245. "android": "cd ./android && ./gradlew app:assembleDebug && ./gradlew installDebug"
  246. }
  247. ```
  248. Now run `npm run android` to build your application
  249. ### Force the same support library version across all dependencies
  250. Some of your dependencies might require a different version of one of Google's support library packages. This results in compilation errors similar to this:
  251. ```
  252. FAILURE: Build failed with an exception.
  253. * What went wrong:
  254. Execution failed for task ':app:preDebugBuild'.
  255. > Android dependency 'com.android.support:design' has different version for the compile (25.4.0) and runtime (26.1.0) classpath. You should manually set the same version via DependencyResolution
  256. ```
  257. To resolve these conflicts, add the following to your `app/build.gradle`:
  258. ```groovy
  259. android {
  260. ...
  261. }
  262. configurations.all {
  263. resolutionStrategy.eachDependency { DependencyResolveDetails details ->
  264. def requested = details.requested
  265. if (requested.group == 'com.android.support' && requested.name != 'multidex') {
  266. details.useVersion "${rootProject.ext.supportLibVersion}"
  267. }
  268. }
  269. }
  270. dependencies {
  271. ...
  272. implementation 'com.android.support:design:25.4.0'
  273. implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
  274. }
  275. ```