React Native 六:使用源码构建React Native

前端之家收集整理的这篇文章主要介绍了React Native 六:使用源码构建React Native前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_301_0@ 在学习React Native的过程中,在资料比较匮乏的时候,通过官方的源码和示例是一个重要的途径。本章节讲解如何通过源代码构建和运行官方的示例程序。
@H_301_0@ 一、先前准备
@H_301_0@ 1.在进行源码构建之前,你应该确认你已经完成了如下安装:
@H_301_0@ Android SDK version 23(compileSdkVersion in Build.gradle)
@H_301_0@ SDK build tools Version 23.0.1(buildToolsVersion in build.gradle)
@H_301_0@ Android Support Repository>=17(for Android Support Library)
@H_301_0@ Android NDK
@H_301_0@ 在Android SDK Manager中查看,并安装; @H_301_0@
@H_301_0@ @H_301_0@ 在Android Developers(http://developer.android.com/intl/zh-cn/ndk/guides/setup.html)下载对应版本的NDK,并安装; @H_301_0@ 2.声明你的Gradle和Andorid SDK的位置; @H_301_0@ 声明ANDROID_SDK和ANDROID_NDK环境变量; @H_301_0@ 或者在你的项目的根目录创建一个local.properties文件,包含如下内容 @H_301_0@ sdk.dir=/Users/your_unix_name/android-sdk-macosx @H_301_0@ ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r10e @H_301_0@ 二、下载源代码 @H_301_0@ 1.使用git克隆下React Native源代码 @H_301_0@
git clone https://github.com/facebook/react-native.git
@H_301_0@ 三、构建源代码 @H_301_0@ 1.添加Node_Modules模块 @H_301_0@
npm install
提示1: @H_301_0@ pengcx@pengcx-Ubuntu:~/ReactNativeWorkspace/react-native$ npm install @H_301_0@ npm ERR! Linux 3.13.0-85-generic @H_301_0@ npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install" @H_301_0@ npm ERR! node v4.4.2 @H_301_0@ npm ERR! npm v2.15.0 @H_301_0@ npm ERR! file /home/pengcx/.npm/tr46/0.0.3/package/package.json @H_301_0@ npm ERR! code EJSONPARSE @H_301_0@ npm ERR! Failed to parse json @H_301_0@ npm ERR! No data,empty input at 1:1cd @H_301_0@ npm ERR! @H_301_0@ npm ERR! ^ @H_301_0@ npm ERR! File: /home/pengcx/.npm/tr46/0.0.3/package/package.json @H_301_0@ npm ERR! Failed to parse package.json data. @H_301_0@ npm ERR! package.json must be actual JSON,not just JavaScript. @H_301_0@ npm ERR! This is not a bug in npm. @H_301_0@ npm ERR! Tell the package author to fix their package.json file. JSON.parse @H_301_0@ npm ERR! Please include the following file with any support request: @H_301_0@ npm ERR! /home/pengcx/ReactNativeWorkspace/react-native/npm-debug.log @H_301_0@ @H_301_0@ 处理:npm cache clean @H_301_0@ 2.运行相应的Demo @H_301_0@
./gradlew :Example:UIExplorer:android:app:installDebug
提示2:Installing APK 'app-debug.apk' on 'm1 Metal - 5.1' for app:debug @H_301_0@ 03:39:32 E/1194330994: Error while uploading app-debug.apk : Unknown failure ([CDS]close[0]) @H_301_0@ Unable to install /home/pengcx/ReactNativeWorkspace/react-native/Examples/UIExplorer/android/app/build/outputs/apk/app-debug.apk @H_301_0@ com.android.ddmlib.InstallException: Unable to upload some APKs @H_301_0@ at com.android.ddmlib.Device.installPackages(Device.java:956) @H_301_0@ @H_301_0@ ... .... @H_301_0@ :Examples:UIExplorer:android:app:installDebug Failed @H_301_0@ FAILURE: Build Failed with an exception. @H_301_0@ * What went wrong: @H_301_0@ Execution Failed for task ':Examples:UIExplorer:android:app:installDebug'. @H_301_0@ > com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Unable to upload some APKs @H_301_0@ * Try: @H_301_0@ Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. @H_301_0@ BUILD Failed @H_301_0@ Total time: 3 mins 29.331 secs @H_301_0@ 处理:修改项目根目录下的build.gradle文件 @H_301_0@ @H_301_0@ classpath 'com.android.tools.build:gradle:1.2.3' @H_301_0@ 提示3: @H_301_0@ pengcx@pengcx-Ubuntu:~/ReactNativeWorkspace/react-native$ sudo ./gradlew :Example:UIExplorer:android:app:installDebug @H_301_0@ FAILURE: Build Failed with an exception. @H_301_0@ * Where: @H_301_0@ Build file '/home/pengcx/ReactNativeWorkspace/react-native/ReactAndroid/build.gradle' line: 3、 @H_301_0@ * What went wrong: @H_301_0@ A problem occurred evaluating project ':ReactAndroid'. @H_301_0@ > Failed to apply plugin [id 'com.android.library'] @H_301_0@ > Gradle version 2.2 is required. Current version is 2.11. If using the gradle wrapper,try editing the distributionUrl in /home/pengcx/ReactNativeWorkspace/react-native/gradle/wrapper/gradle-wrapper.properties to gradle-2.2-all.zip @H_301_0@ * Try: @H_301_0@ Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. @H_301_0@ BUILD Failed @H_301_0@ Total time: 49.768 secs @H_301_0@ 处理:/react-native/gradle/wrapper/gradle-wrapper.properties @H_301_0@ @H_301_0@ distributionUrl=https://services.gradle.org/distributions/gradle-2.2-all.zip @H_301_0@ 3.启动服务器 @H_301_0@
./packager/packager.sh
提示4: @H_301_0@ [Hot Module Replacement] Server listening on /hot @H_301_0@ React packager ready. @H_301_0@ ERROR EACCES: permission denied,scandir '/home/pengcx/ReactNativeWorkspace/react-native/ReactAndroid/build/third-party-ndk/boost/boost_1_57_0' @H_301_0@ {"errno":-13,"code":"EACCES","syscall":"scandir","path":"/home/pengcx/ReactNativeWorkspace/react-native/ReactAndroid/build/third-party-ndk/boost/boost_1_57_0"} @H_301_0@ Error: EACCES: permission denied,121);"> at Error (native) @H_301_0@ Seehttp://facebook.github.io/react-native/docs/troubleshooting.html @H_301_0@ for common problems and solutions. @H_301_0@ 处理: sudo ./packager/packager.sh @H_301_0@ 提示5: @H_301_0@ ERROR A non-recoverable condition has triggered. Watchman needs your help! @H_301_0@ The triggering condition was at timestamp=1462014845: inotify-add-watch(/home/pengcx/ReactNativeWorkspace/react-native/ReactAndroid/build/tmp/expandedArchives/boost_1_57_0.zip_an0bykhqkyzSEOwihr2ej31lv/boost_1_57_0/boost/geometry/strategies/concepts) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl\ @H_301_0@ All requests will continue to fail with this message until you resolve @H_301_0@ the underlying problem. You will find more information on fixing this at @H_301_0@ https://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch @H_301_0@ {"watchmanResponse":{"version":"4.5.0","error":"A non-recoverable condition has triggered. Watchman needs your help!\nThe triggering condition was at timestamp=1462014845: inotify-add-watch(/home/pengcx/ReactNativeWorkspace/react-native/ReactAndroid/build/tmp/expandedArchives/boost_1_57_0.zip_an0bykhqkyzSEOwihr2ej31lv/boost_1_57_0/boost/geometry/strategies/concepts) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl\nAll requests will continue to fail with this message until you resolve\nthe underlying problem. You will find more information on fixing this at\nhttps://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch\n"}} @H_301_0@ Error: A non-recoverable condition has triggered. Watchman needs your help! @H_301_0@ 1462014845: inotify-add-watch(/home/pengcx/ReactNativeWorkspace/react-native/ReactAndroid/build/tmp/expandedArchives/boost_1_57_0.zip_an0bykhqkyzSEOwihr2ej31lv/boost_1_57_0/boost/geometry/strategies/concepts) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl @H_301_0@ https://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch @H_301_0@ at BunserBuf.<anonymous> (/home/pengcx/ReactNativeWorkspace/react-native/node_modules/sane/node_modules/fb-watchman/index.js:95:23) @H_301_0@ at emitOne (events.js:77:13) @H_301_0@ at BunserBuf.emit (events.js:169:7) @H_301_0@ at BunserBuf.process (/home/pengcx/ReactNativeWorkspace/react-native/node_modules/bser/index.js:289:10) @H_301_0@ at /home/pengcx/ReactNativeWorkspace/react-native/node_modules/bser/index.js:244:12 @H_301_0@ at nextTickCallbackWith0Args (node.js:420:9) @H_301_0@ at process._tickCallback (node.js:349:13) @H_301_0@ Seehttp://facebook.github.io/react-native/docs/troubleshooting.html @H_301_0@ @H_301_0@ for common problems and solutions. @H_301_0@ 处理: @H_301_0@ echo 256 | sudo tee -a /proc/sys/fs/inotify/max_user_instances @H_301_0@ echo 32768 | sudo tee -a /proc/sys/fs/inotify/max_queued_events @H_301_0@ echo 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watches @H_301_0@ watchman shutdown-server @H_301_0@ 4.手机端Reload JS,运行如下: @H_301_0@ @H_301_0@

猜你在找的React相关文章