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

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

一、先前准备

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

     Android SDK version 23（compileSdkVersion in Build.gradle）

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

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

     Android NDK

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

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

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

     声明ANDROID_SDK和ANDROID_NDK环境变量；

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

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

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

二、下载源代码

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

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

三、构建源代码

1.添加Node_Modules模块

npm install

提示1：

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

npm ERR! Linux 3.13.0-85-generic

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

npm ERR! node v4.4.2

npm ERR! npm  v2.15.0

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

npm ERR! code EJSONPARSE

npm ERR! Failed to parse json

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

npm ERR!

npm ERR! ^

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

npm ERR! Failed to parse package.json data.

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

npm ERR!

npm ERR! This is not a bug in npm.

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

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

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

处理：npm cache clean

2.运行相应的Demo

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

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

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

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

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

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

... .... 

:Examples:UIExplorer:android:app:installDebug FAILED

FAILURE: Build failed with an exception.

* What went wrong:

Execution failed for task ':Examples:UIExplorer:android:app:installDebug'.

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

* Try:

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

BUILD FAILED

Total time: 3 mins 29.331 secs

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

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

提示3：

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

FAILURE: Build failed with an exception.

* Where:

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

* What went wrong:

A problem occurred evaluating project ':ReactAndroid'.

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

   > 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

* Try:

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

BUILD FAILED

Total time: 49.768 secs

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

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

提示4：

FAILURE: Build failed with an exception.

* Where:

Build file '/home/pengchengxiang/react-native/ReactAndroid/build.gradle' line: 179

* What went wrong:

ndk-build binary /usr/local/opt/android-ndk-r10e/ndk-build doesn't exist or isn't executable.

Check that the $ANDROID_NDK environment variable, or ndk.dir in local.proerties, is set correctly.

(On Windows, make sure you escape backslashes in local.properties or use forward slashes, e.g. C:\\ndk or C:/ndk rather than C:\ndk)

* Try:

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

BUILD FAILED

Total time: 7 mins 33.144 secs

处理：sudo chmod 755 /usr/local/opt/android-ndk-r10e/ndk-build

3.启动服务器

./packager/packager.sh

提示5：

[Hot Module Replacement] Server listening on /hot

React packager ready.

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

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

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

    at Error (native)

See http://facebook.github.io/react-native/docs/troubleshooting.html

for common problems and solutions.

处理： sudo ./packager/packager.sh

提示6:

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

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\

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

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

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: 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"}}

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

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

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

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

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

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

    at emitOne (events.js:77:13)

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

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

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

    at nextTickCallbackWith0Args (node.js:420:9)

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

See http://facebook.github.io/react-native/docs/troubleshooting.html

for common problems and solutions.

处理：

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

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

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

watchman shutdown-server

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