在linux配置react-native的Android开发环境搭建和实机测试

发表于   |   分类于   |  

在总结关于react-native的环境配置之前，首先问候一下facebook的RN开发团队全家，折腾了我很多很多的时间，facebook，fuck you！

配置环境和准备工作

windows的配置不讲了，网上一大堆，ios需要mac才行，穷逼没有mac，等我有了mac之后再来总结关于ios的问题。今天咱主要总结一下关于react-native的环境配置的一些坑。

首先我们需要一台linux系统的PC，我的系统是ubuntu，其他linux基本雷同。

然后我们首先需要安装的就是nodejs和npm(当node安装好之后，npm自然也会被一起装上去)。

安装nvm

我推荐使用nvm来管理同一台机器上的node版本，以后升级node版本和切换其他版本node的时候也比较方便。

直接从 github clone nvm 到本地, 这里假设大家都使用 ~/git 目录存放 git 项目:

1
2
▶ cd ~/git
▶ git clone https://github.com/creationix/nvm.git

配置终端启动时自动执行 source ~/git/nvm/nvm.sh,
在 ~/.bashrc, ~/.bash_profile, ~/.profile, 或者 ~/.zshrc 文件添加以下命令:

1
source ~/git/nvm/nvm.sh

重新打开你的终端, 输入 nvm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
▶ nvm
Node Version Manager
Usage:
    nvm help                    Show this message
    nvm --version               Print out the latest released version of nvm
    nvm install [-s]   Download and install a , [-s] from source
    nvm uninstall      Uninstall a version
    nvm use            Modify PATH to use
    nvm run  []  Run  with  as arguments
    nvm current                 Display currently activated version
    nvm ls                      List installed versions
    nvm ls             List versions matching a given description
    nvm ls-remote               List remote versions available for install
    nvm deactivate              Undo effects of NVM on current shell
    nvm alias []       Show all aliases beginning with
    nvm alias    Set an alias named  pointing to
    nvm unalias           Deletes the alias named
    nvm copy-packages  Install global NPM packages contained in  to current version
Example:
    nvm install v0.10.24        Install a specific version number
    nvm use 0.10                Use the latest available 0.10.x release
    nvm run 0.10.24 myApp.js    Run myApp.js using node v0.10.24
    nvm alias default 0.10.24   Set default node version on a shell
Note:
    to remove, delete or uninstall nvm - just remove ~/.nvm, ~/.npm and ~/.bower folders

出现上述类似的状况的话就说明nvm安装成功了。

利用nvm安装node和npm

如果本地安装过node，我们就可以通过nvm ls的命令来查看现在系统存在哪些node版本。

1
2
3
4
5
6
7
8
9
10
11
12
▶ nvm ls
         v4.6.2
->       v6.9.1
         v6.9.2
         v7.0.0
default -> 6.9.1 (-> v6.9.1)
node -> stable (-> v7.0.0) (default)
stable -> 7.0 (-> v7.0.0) (default)
iojs -> N/A (default)
lts/* -> lts/boron (-> v6.9.2)
lts/argon -> v4.7.0 (-> N/A)
lts/boron -> v6.9.2

上面的情况就表示我又四个node版本在我的PC上。并且我在使用的node版本是v6.9.1。

我们可以利用nvm ls-remote来检查目前的所有node版本。
这个太长了就不粘进来了。

利用nvm install 6.9.2来安装6.9.2版本的node。

1
2
3
4
▶ nvm install 6.9.2
VERSION_PATH=''
Checksums match! Using existing downloaded archive $NVM_DIR/.cache/bin/node-v6.9.2-linux-x64/node-v6.9.2-linux-x64.tar.xz
Now using node v6.9.2 (npm v3.10.9)

然后来检查一下node和npm，应该是没有问题了。

1
2
▶ node -v
v6.9.2

1
2
▶ npm -v
3.10.9

OK，我们的node环境也顺利搭建完成了。

安装react-native-cli

既然已经装好了npm包，直接运行npm install -g react-native-cli

1
▶ npm install -g react-native-cli

等待安装完成之后，运行react-native -v来查看react-native的版本。

1
▶ react-native -v

android开发环境搭建

这个教程太长，自行google或者百度有很多教程，主要就是配置好sdk就行了。
这里省略。相关的教程。

准备安装到实体机

初始化一个项目

运行react-native init helloWorld来初始化一个react-native的项目

1
▶ react-native init helloWorld

等待初始化OK之后我们就可以进入这个目录

1
▶ cd helloWorld

至此，我们的第一个项目已经初始化完成了。

连接android设备

手机usb数据线连接到PC，

1
2
3
4
▶ adb devices
List of devices attached
26beb850	device

运行adb devices之后出现上述情况就表示链接OK了。
出现其他问题请自行google解决方案。

安装app到实体机

首先运行

1
▶ react-native start

等待启动完成后，打开另一个terminal，切到项目目录，运行以下命令。

1
▶ react-native run-android

经过一段时间的等待之后发现安卓的APP已经安装成功了，然而界面会闪退，这个是因为app的悬浮窗的权限被禁止了，
这个时候我们需要手动设置一下app的权限，将helloWorld的悬浮窗权限改为允许就OK了。

至此，环境搭建完成，APP也已经可以正常的运行了。