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

在学习React Native的过程中，在资料比较匮乏的时候，通过官方的源码和示例是一个重要的途径。本章节讲解如何通过源代码构建和运行官方的示例程序。@H_502_2@

一、先前准备@H_502_2@

1.在进行源码构建之前，你应该确认你已经完成了如下安装：@H_502_2@

Android SDK version 23（compileSdkVersion in Build.gradle）@H_502_2@

SDK build tools Version 23.0.1（buildToolsVersion in build.gradle）@H_502_2@

Android Support Repository>=17（for Android Support Library）@H_502_2@

Android NDK@H_502_2@

在Android SDK Manager中查看，并安装；@H_502_2@

@H_502_2@

在Android Developers（http://developer.android.com/intl/zh-cn/ndk/guides/setup.html）下载对应版本的NDK，并安装；@H_502_2@

2.声明你的Gradle和Andorid SDK的位置；@H_502_2@

声明ANDROID_SDK和ANDROID_NDK环境变量；@H_502_2@

或者在你的项目的根目录创建一个local.properties文件，包含如下内容；@H_502_2@

sdk.dir=/Users/your_unix_name/android-sdk-macosx@H_502_2@

ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r10e@H_502_2@

二、下载源代码@H_502_2@

1.使用git克隆下React Native源代码@H_502_2@

git clone https://github.com/facebook/react-native.git@H_502_2@

三、构建源代码@H_502_2@

1.添加Node_Modules模块@H_502_2@

npm install@H_502_2@

提示1：@H_502_2@@H_502_2@

pengcx@pengcx-Ubuntu:~/ReactNativeWorkspace/react-native$ npm install@H_502_2@@H_502_2@

npm ERR! Linux 3.13.0-85-generic@H_502_2@@H_502_2@

npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install"@H_502_2@@H_502_2@

npm ERR! node v4.4.2@H_502_2@@H_502_2@

npm ERR! npm v2.15.0@H_502_2@@H_502_2@

npm ERR! file /home/pengcx/.npm/tr46/0.0.3/package/package.json@H_502_2@@H_502_2@

npm ERR! code EJSONPARSE@H_502_2@@H_502_2@

npm ERR! Failed to parse json@H_502_2@@H_502_2@

npm ERR! No data,empty input at 1:1cd@H_502_2@@H_502_2@

npm ERR!@H_502_2@@H_502_2@

npm ERR! ^@H_502_2@@H_502_2@

npm ERR! File: /home/pengcx/.npm/tr46/0.0.3/package/package.json@H_502_2@@H_502_2@

npm ERR! Failed to parse package.json data.@H_502_2@@H_502_2@

npm ERR! package.json must be actual JSON,not just JavaScript.@H_502_2@@H_502_2@

npm ERR! This is not a bug in npm.@H_502_2@@H_502_2@

npm ERR! Tell the package author to fix their package.json file. JSON.parse@H_502_2@@H_502_2@

npm ERR! Please include the following file with any support request:@H_502_2@@H_502_2@

npm ERR! /home/pengcx/ReactNativeWorkspace/react-native/npm-debug.log@H_502_2@@H_502_2@

处理：npm cache clean@H_502_2@@H_502_2@

2.运行相应的Demo@H_502_2@

./gradlew :Example:UIExplorer:android:app:installDebug@H_502_2@

提示2：@H_502_2@Installing APK 'app-debug.apk' on 'm1 Metal - 5.1' for app:debug@H_502_2@@H_502_2@

03:39:32 E/1194330994@H_502_2@: Error while uploading app-debug.apk : Unknown failure ([CDS]close[0])@H_502_2@@H_502_2@@H_502_2@

Unable to install /home/pengcx/ReactNativeWorkspace/react-native/Examples/UIExplorer/android/app/build/outputs/apk/app-debug.apk@H_502_2@@H_502_2@

com.android.ddmlib.InstallException: Unable to upload some APKs@H_502_2@@H_502_2@

at com.android.ddmlib.Device.installPackages(Device.java:956)@H_502_2@@H_502_2@

... ....@H_502_2@@H_502_2@

:Examples:UIExplorer:android:app:installDebug Failed@H_502_2@@H_502_2@

FAILURE: Build Failed with an exception.@H_502_2@@H_502_2@

* What went wrong:@H_502_2@@H_502_2@

Execution Failed for task ':Examples:UIExplorer:android:app:installDebug'.@H_502_2@@H_502_2@

> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Unable to upload some APKs@H_502_2@@H_502_2@

* Try:@H_502_2@@H_502_2@

Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.@H_502_2@@H_502_2@

BUILD Failed@H_502_2@@H_502_2@

Total time: 3 mins 29.331 secs@H_502_2@@H_502_2@

处理：修改项目根目录下的build.gradle文件@H_502_2@@H_502_2@

classpath 'com.android.tools.build:gradle:1.2.3'@H_502_2@@H_502_2@

提示3：@H_502_2@@H_502_2@

pengcx@pengcx-Ubuntu:~/ReactNativeWorkspace/react-native$ sudo ./gradlew :Example:UIExplorer:android:app:installDebug@H_502_2@@H_502_2@

FAILURE: Build Failed with an exception.@H_502_2@@H_502_2@

* Where:@H_502_2@@H_502_2@

Build file '/home/pengcx/ReactNativeWorkspace/react-native/ReactAndroid/build.gradle' line: 3、@H_502_2@@H_502_2@

* What went wrong:@H_502_2@@H_502_2@

A problem occurred evaluating project ':ReactAndroid'.@H_502_2@@H_502_2@

> Failed to apply plugin [id 'com.android.library']@H_502_2@@H_502_2@

> 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_502_2@@H_502_2@

* Try:@H_502_2@@H_502_2@

Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.@H_502_2@@H_502_2@

BUILD Failed@H_502_2@@H_502_2@

Total time: 49.768 secs@H_502_2@@H_502_2@

处理：/react-native/gradle/wrapper/gradle-wrapper.properties@H_502_2@@H_502_2@

distributionUrl=https://services.gradle.org/distributions/gradle-2.2-all.zip@H_502_2@@H_502_2@@H_502_2@

3.启动服务器@H_502_2@

./packager/packager.sh@H_502_2@

提示4：@H_502_2@@H_502_2@

[Hot Module Replacement] Server listening on /hot@H_502_2@@H_502_2@

React packager ready.@H_502_2@@H_502_2@

ERROR EACCES: permission denied,scandir '/home/pengcx/ReactNativeWorkspace/react-native/ReactAndroid/build/third-party-ndk/boost/boost_1_57_0'@H_502_2@@H_502_2@

{"errno":-13,"code":"EACCES","syscall":"scandir","path":"/home/pengcx/ReactNativeWorkspace/react-native/ReactAndroid/build/third-party-ndk/boost/boost_1_57_0"}@H_502_2@@H_502_2@

Error: EACCES: permission denied,121);"> at Error (native)@H_502_2@@H_502_2@

Seehttp://facebook.github.io/react-native/docs/troubleshooting.html@H_502_2@@H_502_2@

for common problems and solutions.@H_502_2@@H_502_2@

处理： sudo ./packager/packager.sh@H_502_2@@H_502_2@@H_502_2@

提示5:@H_502_2@@H_502_2@

ERROR A non-recoverable condition has triggered. Watchman needs your help!@H_502_2@@H_502_2@

The triggering condition was at timestamp=1462014845@H_502_2@: 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_502_2@@H_502_2@@H_502_2@

All requests will continue to fail with this message until you resolve@H_502_2@@H_502_2@

the underlying problem. You will find more information on fixing this at@H_502_2@@H_502_2@

https://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch

{"watchmanResponse":{"version":"4.5.0","error":"A non-recoverable condition has triggered. Watchman needs your help!\nThe triggering condition was at timestamp=1462014845@H_502_2@: 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_502_2@@H_502_2@@H_502_2@

Error: A non-recoverable condition has triggered. Watchman needs your help!@H_502_2@@H_502_2@

1462014845@H_502_2@: 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_502_2@@H_502_2@@H_502_2@

https://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch@H_502_2@@H_502_2@

at BunserBuf.<anonymous> (/home/pengcx/ReactNativeWorkspace/react-native/node_modules/sane/node_modules/fb-watchman/index.js:95:23)@H_502_2@@H_502_2@

at emitOne (events.js:77:13)@H_502_2@@H_502_2@

at BunserBuf.emit (events.js:169:7)@H_502_2@@H_502_2@

at BunserBuf.process (/home/pengcx/ReactNativeWorkspace/react-native/node_modules/bser/index.js:289:10)@H_502_2@@H_502_2@

at /home/pengcx/ReactNativeWorkspace/react-native/node_modules/bser/index.js:244:12@H_502_2@@H_502_2@

at nextTickCallbackWith0Args (node.js:420:9)@H_502_2@@H_502_2@

at process._tickCallback (node.js:349:13)@H_502_2@@H_502_2@

Seehttp://facebook.github.io/react-native/docs/troubleshooting.html@H_502_2@@H_502_2@@H_502_2@

for common problems and solutions.@H_502_2@@H_502_2@

处理：@H_502_2@@H_502_2@

echo 256 | sudo tee -a /proc/sys/fs/inotify/max_user_instances@H_502_2@@H_502_2@

echo 32768 | sudo tee -a /proc/sys/fs/inotify/max_queued_events@H_502_2@@H_502_2@

echo 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watches@H_502_2@@H_502_2@

watchman shutdown-server@H_502_2@@H_502_2@

4.手机端Reload JS，运行如下：@H_502_2@

@H_502_2@

@H_502_2@

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

猜你在找的React相关文章