使用React-native在Linux下构建Android应用

Published: 2015-12-27

Tags: React Native

本文总阅读量次
  1. 关于本文
  2. 相关资料
  3. 系统环境
  4. 安装git
  5. 安装openJDK
  6. 安装Android SDK
  7. 安装Genymotion
  8. 初始化项目
  9. 总结

1. 关于本文

react正茁壮成长，react-native也是如日中天，因为对react挺感兴趣，所以在了解了react-native后也打算弄个hello world玩耍一下，打开官网的说明，简单看了下，貌似最先支持的是OSX的系统，然后逐步的开始支持Linux与Windows，作为一个Fedora的异教徒，怎么能投奔苹果党，既然支持Linux，那么怎么着也得折腾折腾 —— 2015-12-27

所以，记录下来，一是方便自己以后搭建，二来也能帮助没有一点Android开发经验的同学也能搭建个hello world玩玩

2. 相关资料

React-native的官方网站：https://facebook.github.io/react-native/docs/getting-started.html 尽量关注官网的教程，因为是最具有时效性和权威的

关于开发Android的连接是这个：https://facebook.github.io/react-native/docs/android-setup.html

3. 系统环境

操作系统：Linux(Fedora 23) Node.js版本：v5.0.0 npm版本：3.3.6

node和npm安装此处不介绍，推荐使用nvm管理node版本

注意！继续操作前需对网络进行线路优化

4. 安装git

dnf install git

5. 安装openJDK

dnf install java-1.8.0-openjdk-devel

其它发行版查询下“openjdk”，进行安装

6. 安装Android SDK

下载网址：https://developer.android.com/sdk/installing/index.html

下载那个 Stand-alone SDK Tools 就可以

将其解压缩到Documents文件夹下，编辑 ~/.bashrc 文件，在末尾添加

export ANDROID_HOME=/home/你的用户名/Documents/android-sdk-linux

这样，每次开机都会自动载入环境变量。当然，现在需要手动在中端运行一下如上命令

上面的只是一个管理工具，在android-sdk-linux目录下运行 ./tool/android

启动管理界面，按照如下框中进行勾选，然后点击安装

也许不用安装SDK Build-tools 23.0.2，因为之前我安装这个，提示报错，缺少0.1，于是我才又下载下边的那个0.1

点击安装后，离开椅子，看看风景什么的吧，可能需要等一会...

7. 安装Genymotion

Genymotion是一个模拟器，可以用来模拟andrid手机，这在开发手机应用的时候非常方便。

Genymotion是收费软件，不过可以下载免费个人版，下载地址： Genymotion下载

虽然提供的都为Ubuntu，但是不用担心，Fedora也是可以使用的。随便下载一个，我这里下载的是64 bits version (40.95 MB)

在安装Genymotion之前，Linux下需要安装VirtualBox，这个东西不是那么好装的，以前就花了很多功夫来安装，并记录下来，现在倒是省事很多。《Fedora下安装VirtualBox》， 看来多做笔记还是有些用的

安装Genymotion：

chmod +x genymotion-2.6.0-ubuntu15_x64.bin
./genymotion-2.6.0-ubuntu15_x64.bin

安装Genymotion

很快就安装完成了，这时，可以到Genymotion的目录下运行./genymotion运行模拟器

基本上会缺少一些包的

libjpeg.so.8: cannot open shared object file: No such file or directory

解决办法：去jpegclub官网下载8版本的包编译安装，fedora的源只提供了6.4版本的。

安装jpeg：

tar xvf jpegsrc.v8d1.tar.gz
cd jpeg-8d1
./configure
make
make test
sudo make install

jpeg被安装到了/usr/local/lib目录下

[sincerefly@localhost ~]$ ls /usr/local/lib
libjpeg.a  libjpeg.la  libjpeg.so  libjpeg.so.8  libjpeg.so.8.4.0
[sincerefly@localhost ~]$

有libjpeg.so.8文件，但是运行Genymotion还是不会找到jpeg，需要我们手动指定下目录

编辑/etc/ld.so.conf文件(需要管理员权限)，将/usr/local/lib添加到里面，关闭文件后运行ldconfig，ok

参考：

继续运行./genymotion又少东西了...

./genymotion: error while loading shared libraries: libdouble-conversion.so.1: cannot open shared object file: No such file or directory

源中没有，网上找到了一个rpm包，下载那个x86_64的Fedora23版本。

sudo dnf install ./double-conversion-2.0.1-6.fc23.x86_64.rpm

好了，再次运行，我还等着继续报错，结果出来个界面，吓我一跳...

Genymotion

之后就比较好操作了，下一步什么的，选择个版本，手机...等等，继续等待...

安装完成，在主界面点击启动，就可以了。

8. 初始化项目

准备了这么长时间，终于可以初始化项目了，呼...

npm install -g react-native-cli
react-native init AwesomeProject

这一步是npm在安装软件，所以必须要联网的，运行期间应该会出现这样的错误

AAPT err(1556614376): /home/sincerefly/Documents/android-sdk-linux/build-tools/23.0.1/aapt: error while loading shared libraries: libz.so.1: cannot open shared object file: No such file or directory
AAPT err(262116085): /home/sincerefly/Documents/android-sdk-linux/build-tools/23.0.1/aapt: error while loading shared libraries: libz.so.1: cannot open shared object file: No such file or directory
AAPT err(138737218): /home/sincerefly/Documents/android-sdk-linux/build-tools/23.0.1/aapt: error while loading shared libraries: libz.so.1: cannot open shared object file: No such file or directory
AAPT err(129251341): /home/sincerefly/Documents/android-sdk-linux/build-tools/23.0.1/aapt: error while loading shared libraries: libz.so.1: cannot open shared object file: No such file or directory
AAPT err(423515635): /home/sincerefly/Documents/android-sdk-linux/build-tools/23.0.1/aapt: error while loading shared libraries: libz.so.1: cannot open shared object file: No such file or directory
AAPT err(2092258516): /home/sincerefly/Documents/android-sdk-linux/build-tools/23.0.1/aapt: error while loading shared libraries: libz.so.1: cannot open shared object file: No such file or directory
AAPT err(1374803413): /home/sincerefly/Documents/android-sdk-linux/build-tools/23.0.1/aapt: error while loading shared libraries: libz.so.1: cannot open shared object file: No such file or directory

我的系统是64位的，但是它需要的是32位的包，所以应该这样安装：

sudo dnf install -y glibc.i686 zlib.i686 libstdc++.i686 ncurses-libs.i686

Ubuntu用户参考：Mobile-Dev-Install:-Android-on-Linux

上边的链接非常建议大家看看，会有收获

跟着官网走

cd AwesomeProject
react-native run-android

不出意外的话你会得到这样的输出和一个红色的画面

Starting JS server...
Building and installing the app on the device (cd android && ./gradlew installDebug)...
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72301Library UP-TO-DATE
:app:prepareComAndroidSupportRecyclerviewV72301Library UP-TO-DATE
:app:prepareComAndroidSupportSupportV42301Library UP-TO-DATE
:app:prepareComFacebookFrescoDrawee081Library UP-TO-DATE
:app:prepareComFacebookFrescoFbcore081Library UP-TO-DATE
:app:prepareComFacebookFrescoFresco081Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipeline081Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineOkhttp081Library UP-TO-DATE
:app:prepareComFacebookReactReactNative0171Library UP-TO-DATE
:app:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
:app:prepareDebugDependencies
:app:compileDebugAidl UP-TO-DATE
:app:compileDebugRenderscript UP-TO-DATE
:app:generateDebugBuildConfig UP-TO-DATE
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets UP-TO-DATE
:app:generateDebugResValues UP-TO-DATE
:app:generateDebugResources UP-TO-DATE
:app:mergeDebugResources UP-TO-DATE
:app:bundleDebugJsAndAssets SKIPPED
:app:processDebugManifest UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources UP-TO-DATE
:app:preDexDebug UP-TO-DATE
:app:dexDebug UP-TO-DATE
:app:validateDebugSigning
:app:packageDebug UP-TO-DATE
:app:zipalignDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:installDebug
Installing APK 'app-debug.apk' on 'PREVIEW - Google Nexus 5X - 6.0.0 - API 23 - 1080x1920 - 6.0'
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 14.435 secs

This build could be faster, please consider using the Gradle Daemon: http://gradle.org/docs/2.4/userguide/gradle_daemon.html
Starting the app (/home/sincerefly/Documents/android-sdk-linux/platform-tools/adb shell am start -n com.awesomeproject/.MainActivity)...
Starting: Intent { cmp=com.awesomeproject/.MainActivity }
events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: spawn xterm ENOENT
    at exports._errnoException (util.js:860:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
    at onErrorNT (internal/child_process.js:344:16)
    at doNTCallback2 (node.js:450:9)
    at process._tickCallback (node.js:364:17)

这里我没有更细致的研究原因，也没有很好的办法，sf上说Linux下用react-native start启动项目就可以了

重新运行，真的可以...

如何简单的修改下界面呢？

编辑项目目录的index.android.js文件，如果你之前了解过react，那么看起来会非常的亲切

简单修改点东西，然后

默认的右侧，你点一下最右下角也能出现菜单，点击Reload JS，就可以刷新界面了

9. 总结

想必OSX下安装会容易很多吧...

Facebook的员工虽然都是Mac电脑，但是既然开源了，也照顾我等用Linux的小伙伴呀 (。・`ω´・)

React-native发展很快，现在不用着急解决自动刷新等问题，想必隔断时间看看官网，估计对于Linux就会更加的完善了.

就酱～