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

前端之家收集整理的这篇文章主要介绍了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! 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
3.启动服务器
./packager/packager.sh
提示4:
[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,121);"> at Error (native)
for common problems and solutions.
处理: sudo ./packager/packager.sh
提示5:
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
{"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!
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
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)
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,运行如下:

猜你在找的React相关文章