React Native for Android 之初体验

文章目录
  1. 1. 框架的简介
  2. 2. 环境搭建
  3. 3. 第一个 React Native 应用
  4. 4. 常见问题及解决办法
  5. 5. 进阶之路
  6. 6. 参考文献

What hurts more, the pain of hard work or the pain of regret.

最近,公司新项目打算基于 H5 写 Android 的 UI 界面,于是,前几天了解并比照了相关的开发框架,接触到了 Facebook 公司大名鼎鼎的 React Native 框架,以下就该框架简单谈一谈。

框架的简介

React Native 由 React 衍生出来,而 React 起源于 Facebook 的内部项目,用来架设旗下的 Instagram 网站,于 2013 年 5 月开源。

React Native,用写 Web App 的方式写 Native App,即用 JavaScript 和 React 开发应用,仅仅需要一份业务逻辑代码,通吃 Android、iOS 和 Web 三端。Facebook 公司最早发布的 React Native 是针对 iOS 的,React Native for Android 是去年 9 月 15 日开源的。现如今,React Native 的体验已经很不错了,接近原生应用,但尚未达到 Native App 的体验。不过,其发展势头迅猛,被誉为所谓的未来。

环境搭建

本文中,该框架环境搭建是基于 Mac OS X 平台的,Windows 平台的框架环境搭建可以参考文章 React-Native 环境搭建(Windows for Android),面向对象仅是有一定 Android 开发基础的同学,默认已配置好 Android 开发环境。

Step 1.安装 Homebrew

Homebrew 是一款自由及开放源代码的软件包管理系统,用以简化 Mac OS X 系统上的软件安装过程,以 Ruby 语言编写,由一个核心 Git 版本库构成,使用户能更新 Homebrew,是 OS X 不可缺少的套件管理器。

先检查电脑上是否已经存在 Homebrew,终端上执行以下指令:

1
brew -v

若已经安装,则如下图:

若未安装,终端上执行以下指令:

1
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Step 2.安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时,使用高效、轻量级的事件驱动、非阻塞 I/O 模型。

下载地址:https://nodejs.org/en/ ,下载 4.1 或更高版本。

安装后,检查是否安装成功以及对应的版本:

Step 3.安装 Watchman 和 Flow

Watchman 同样是 Facebook 的一个开源项目,用来监视文件并记录文件的改动情况,当文件变更,它可以触发一些操作,如执行一些命令等。

Flow 是一个 JavaScript 静态类型检查器,为 JavaScript 添加了静态类型检查,以提高开发效率和代码质量。

安装方式分别如下:

1
brew install watchman

1
brew install flow

Step 4.安装 React Native

以下涉及 npm 的操作,每次执行之前,先设置好淘宝镜像,以减免不必要的麻烦(吐槽下 GFW),终端上分别执行以下指令:

1
npm config set registry https://registry.npm.taobao.org --global

1
npm config set disturl https://npm.taobao.org/dist --global

再紧接着,安装 React Native,执行以下指令:

1
npm install -g react-native-cli

安装完成后,注意这里可能出现的一个坑,即关于 SDK 环境变量的配置

Step 5.配置 SDK 环境变量

首先,重新启动 Terminal 终端工具。

然后,进入根目录,执行以下创建指令:

1
touch .bash_profile

执行以下指令,打开文件:

1
open .bash_profile

这时,会打开一个文本文件,输入以下内容,比如我的:export PATH=${PATH}:/Users/Iamasoldier6/Library/Android/sdk/platform-tools,相关路径为 SDK 实际所在路径。

最后,执行指令:

1
source .bash_profile

再输入 adb,敲回车,判断未显示 command not found,则命令有效,环境变量配置完成。

相关操作如下图所示:

第一个 React Native 应用

Step 1.初始化项目
进入自定义的工作目录,首先,还是如上所述,保险起见,先设置到淘宝镜像,然后在该工作目录下,执行以下指令:

1
react-native init AwesomeProject

等待几分钟,项目便创建成功。

Step 2.运行项目

数据线接到手机(也可以使用模拟器),暂定手机系统为 Android 5.0+,切换到 AwesomeProject 目录下,终端执行以下指令:

1
react-native run-android

如下图所示:

稍等片刻后,不出意外的话,手机会出现如以下截图所示:

Congratulations! 欢迎跨进 React Native 的大门!

常见问题及解决办法

如果能一路顺畅地获得最终的效果,那恭喜你,规避了很多的坑。事实上,一般不会一路顺畅地走下来,常见问题及解决办法如下:

1.运行项目时,手机上可能会出现如下现象:

常用解决办法:

(1) 项目目录下,终端上执行以下指令:

1
adb reverse tcp:8081 tcp:8081

摇一摇手机,出现一个对话框,选择 Reload,成功则完,若继续出现其它类似的红屏页面,参考 (2) 。

(2) 仍然是,摇一摇手机,出现对话框,选择 Dev Settings,点击 Debug server host & port for device,弹出一个输入框,输入当前所用电脑的局域网 IP 和 端口号 8081,如我的:10.10.3.95:8081,点确定,再返回后,重新 Reload,成功则完,再出现问题,那就得科学上网,去 Google 了。

2.真机若为小米手机,运行效果出现白屏时,参考经验

更多问题,右转 Google 解决。

进阶之路

资料参见 GitHub 上总结的收藏 react-native-guide

到这一步,我们仅仅刚跨进大门,下一步,可能就想做出更丰富的应用,会想到研读一下开源的项目,很抱歉,以上收藏链接中的开源项目,绝大部分在运行编译过程中都多少有些问题或者不适用,对初学者定是一遍遍的打击,经本人一一检测(或许有所遗漏),目前,RN-BiZhireact-native-gank 可以成功地编译运行到手机上。

举个例子,比如,针对 RN-BiZhi 项目。

从 GitHub 上下载到该项目后,打开终端,进入该项目的主目录下,再执行以下命令,和之前创建第一个应用时大同小异:

首先,配置淘宝镜像:

1
2
3
npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

然后,执行指令:

1
npm install

稍等几分钟,完成后,再执行指令:

1
react-native run-android

Windows 下,执行该指令之前,可能得先执行指令:

1
react-native start

项目运行成功后,如下截图所示:

至此,初体验到此结束。

本人才疏学浅,如有疏漏错误之处,望读者中有识之士不吝赐教,谢谢。

1
Email: [email protected] / WeChat: Wolverine623

您也可以关注我个人的微信公众号码农六哥第一时间获得博客的更新通知,或后台留言与我交流

参考文献

1.https://facebook.github.io/react-native/