React Native Android开发之一: 环境配置

React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。
React Native着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台。(Learn once, write anywhere)
Facebook已经在多项产品中使用了React Native,并且将持续地投入建设React Native。
—— from React Native 中文网

上诉就是React Native的特色。
Facebook 于2015年9月15日推出 React Native for Android 版本。相比较于iOS,在Android上,尤其是在Windows上跑Demo。
真的很多情况都遇到了,接下来就介绍在Windows上搭建React Native Android的环境。

环境需求

按照官方的引导,基本是在OS X上进行的,OS X上没有去实验过,有兴趣查看参考: OS X环境需求
不管开发Android或者iOS,弄台Mac还是很有必要的,事半功倍啊。
下面主要介绍下Windows上安装环境的过程。

Android SDK

这个默认大家都已经设置完成,注意点,一定要注意版本:

  • Android SDK Build-tools version 23.0.1
  • Android Support Repository
  • Android 4.1上

安装Node.js

从官网下载https://nodejs.org/下载,需要4.0或以上。
安装完成后,检查命令行是否可用

1
2
3
4
λ node -v
v4.2.2
λ npm -version
2.14.7

安装react-native-cli

命令行输入:

1
$ npm install -g react-native-cli

运行环境

运行环境,一个是使用模拟器,一个是使用真机。

模拟器

现在 Genymotion可以说是最方便的模拟器,可以下载各种android版本,来创建虚拟设备。

初始化项目

初始化RN项目

1
$ react-native init AwesomeProject

耐心等几分钟。如果出现很久还没有初始化成功,可以试试国内的镜像。

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
total 11
drwxr-xr-x 1 yeungeek Administ 4096 Dec 1 16:44 ./
drwxr-xr-x 4 yeungeek Administ 0 Nov 30 11:30 ../
-rw-r--r-- 1 yeungeek Administ 1501 Nov 30 11:33 .flowconfig
-rw-r--r-- 1 yeungeek Administ 341 Nov 30 11:33 .gitignore
drwxr-xr-x 1 yeungeek Administ 4096 Dec 1 19:02 .idea/
-rw-r--r-- 1 yeungeek Administ 2 Nov 30 11:33 .watchmanconfig
drwxr-xr-x 1 yeungeek Administ 4096 Dec 1 17:22 android/
-rw-r--r-- 1 yeungeek Administ 1084 Dec 1 16:44 index.android.js
-rw-r--r-- 1 yeungeek Administ 1065 Nov 30 11:33 index.ios.js
drwxr-xr-x 1 yeungeek Administ 0 Nov 30 11:33 ios/
drwxr-xr-x 1 yeungeek Administ 0 Nov 30 11:33 node_modules/
-rw-r--r-- 1 yeungeek Administ 181 Nov 30 11:33 package.json

看到有个平台目录,android和ios,以及对应的index.android.js和index.ios.js文件。

运行项目

接下来就是我的填坑之旅了,看到其他人介绍到这步后,然后直接运行

1
react-native run-android

然后就app就直接可以启动了。不过我遇到了下面的这个问题。

坑-红色的unload


根据提示,去设置菜单Dev Settings,设置为本机的ip。依然是红色,那就先拦截下包吧,看看请求返回了那些信息

404错误,模拟器上不能访问该ip地址

React Native使用的nodejs的服务,看看它是如何启动server的。
看了下刚才工程node_modules,看了下跟server有关的就是runServer.js和server.js

在runServer.js中有声明如何启动http服务:

1
2
3
4
5
6
7
8
9
const serverInstance = http.createServer(app).listen(
args.port,
'::',
function() {
wsProxy = webSocketProxy.attachToServer(serverInstance, '/debugger-proxy');
webSocketProxy.attachToServer(serverInstance, '/devtools');
readyCallback();
}
);

其中listen接口,参考server.listen(port[, hostname][, backlog][, callback])

the server will accept connections on any IPv6 address (::) when IPv6 is available, or any IPv4 address (0.0.0.0) otherwise. A port value of zero will assign a random port.

这里说明使用::表明监听IPv6地址,当前我的环境IPv6网络无法连接。
所以考虑使用IPv4来试试。修改::0.0.0.0,重新启动react-native start
but

1
ERROR Packager can't listen on port 8081

查看端口占用情况

1
2
λ netstat -ano|findstr "8081"
TCP 0.0.0.0:8081 0.0.0.0:0 LISTENING 3556

而且在系统管理器中,根本找不到PID为3556的应用,那能更改端口吗?
在server.js中有声明:

1
2
3
4
5
const args = parseCommandLine([{
command: 'port',
default: 8081,
type: 'string',
}, {

修改80818080,重新启动react-native start
然后重新设置Dev Settings。
结果:

成功了!

这里想说明下,这个过程只是整理了React Native Android连接的http服务,和查找问题的过程。
以做参考

参考

yeungeek wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
曾经有一份打赏放在我面前,我没有珍惜.如果上天给我再来一次的机会,我会说三个字:赏死我.