Ubuntu14.04搭建React Native for Android开发环境[完整版]

所需环境:

adt-bundle-linux.tar.gz ->AndroidSDK

genymotion-2.6.0-linux_x64.bin ->安卓模拟器

jdk-8u65-linux-x64.tar.gz ->JAVASDK

node-v5.3.0-linux-x64.tar.gz ->用来下载react-active

virtualbox-5.0_5.0.12-104815-Ubuntu-trusty_amd64.deb ->vbox,用来允许虚拟安卓系统

watchman-master.zip ->用来监视文件并且记录文件的改动情况，当文件变更它可以触发一些操作,例如执行一些命令等等。

以上安装包，百度云提供下载：http://pan.baidu.com/s/1dFHgekD 密码：1ic1

1.安装JAVA环境
tar zxvf jdk-8u65-linux-x64.tar.gz
sudo vi /etc/profile 在尾部添加如下代码(不懂可百度如何安装JAVAJDK,版本和我这对上就i行)
export JAVA_HOME=/具体路径自己设置/jdk1.8.0_65
export JRE_HOME=${JAVA_HOME}/jre (此条直接复制)
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib (此条直接复制)
export PATH=${JAVA_HOME}/bin:$PATH (此条直接复制)

2.安装Node环境
tar zxvf node-v5.3.0-linux-x64.tar.gz
sudo vi /etc/profile
export NODE_HOME=/自己放路径(放在普通用户目录下,涉及到文件夹的修改)/node-v5.3.0-linux-x64 export PATH=$PATH:$NODE_HOME/bin (此条直接复制)
export NODE_PATH=$NODE_HOME/lib/node_modules (此条直接复制)

3.配置AndroidSDK
tar zxvf adt-bundle-linux.tar.gz 把解压后adt-bundle-linux,移到~用户目录下
sudo vi /etc/.profile (将以下代码修改并添加到/etc/.profile中)
export PATH=$PATH:/你的解压后的目录/adt-bundle-linux/sdk/platform-tools:/你的解压后的目录/adt-bundle-linux/sdk/tools
#react-native run-android会找此变量ANDROID_HOME
export ANDROID_HOME=/你的解压后的目录/adt-bundle-linux/sdk export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/build-tools (此条直接复制)
export USE_GLOBAL_ADK=/你的解压后的目录/adt-bundle-linux/sdk

上述环境配置完成后,重启电脑.

4.重启之后,安装watchman监视器
unzip watchman-master.zip
cd watchman

sudo apt-get install python-dev (所需的环境)
sudo apt-get install autoconf (所需的环境)
./autogen.sh
./configure
make
sudo make install

5.安装react-native
(刚才重启就是为了这步,因为要用到npm,如果你只是source .profile的话是没有npm这个软件的,而有的人顺手,看到没有npm就直接apt-get install, 这是万万不可的,你apt-get的版本过低,不信的可以去试试.总之,重启之后就有npm了,版本号为 3.3.12(貌似是这个,忘记了))
执行如下命令:
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm install -g react-native-cli

6.安装virtualbox虚拟机
因为genymotion镜像需要用到此软件
sudo dpkg -i virtualbox-5.0_5.0.12-104815-Ubuntu-trusty_amd64.deb
# 安装时报错,执行下面命令，下载所需的依赖软件
sudo apt-get install -f
# 重新执行安装命令
sudo dpkg -i virtualbox-5.0_5.0.12-104815-Ubuntu-trusty_amd64.deb

7.安装genmotion(安卓模拟器,这是FaceBook推荐的,反正我安的这个,大家可以尝试别的,但是出问题别找我,不会)
chmod 777 genymotion-2.6.0-linux_x64.bin./genymotion-2.6.0-linux_x64.bin
# 在ubuntu 已安装软件里启动genymotion,并锁定到测边栏里---------然后到官网注册
#　https://www.genymotion.com/
# 启动genymotion,在settings里登录账号
# add添加一个新的虚拟机镜像，统一选择Nexus5X API23(1080x1920)
# 安装镜像后，start启动镜像 (先别start,去楼上看virtuabox中的回复)
#开发时，需开启wifi模式(最好关闭移动数据,免得混乱)，否则调试时无法加载JS(切记)

执行完以上步骤环境基本搭建好了,大家可以先启动.虚拟机看是否能正常运行.

8.接下来的步骤就是创建项目了:
react-native init Your_Project(此处过程略微漫长,大家耐心等待)
cd Your_Project
react-native start
启动到一半会卡住,此时需要访问一个页面(点开之后就可以了)
http://localhost:8081/index.android.bundle?platform=android

9.新开一个终端,执行以下命令
# 安装react-native run-android需要的环境
sudo apt-get install lib32stdc++6
sudo apt-get install lib32z1
# 第一次运行时, 需要下载很多包, 需耐心等待
react-native run-android ( 此步时间也很漫长,耐心)

10.将手机调整为飞行模式并连上主机wifi

打开你创建的APP,点击侧边栏中的menu,然后点 Dev Settings设置连接你的Ubuntu主机,
下图中地址为Ubuntu的IP,端口统一为8081

如果你看到如下图片,那就证明你成功了,接下来就可以愉快的进行开发了.

本文永久更新地址：http://www.linuxdiyf.com/linux/21070.html