最近闲来无事，学习了一下使用react-native开发客户端，从学习到客户端基本可以使用大概用了20天的时间，这个期间自己学到了不少知识，现把学习和开发的经历做一下总结，以便供大家参考学习。

项目背景

先说一下项目的背景吧，本来我是一名创业公司的技术总监，开发了一个关于音乐相关的App, 我们引用youtube视频，一些知名演奏家演奏的知名作曲家（贝多芬、巴赫、肖邦等）的音乐作品，结合这些作曲家的曲谱扫描件，进行乐谱和视频的同步播放。如下截图：

1.jpg
2.jpg
不过，我们只做了iOS端的app，公司就因融资困难，团队解散了。现在找工作比较困难，正好有时间，所以就自学react-native把安卓端的App实现一下，所以我这次介绍的是安卓版的开发，至于苹果版的我没有实现，所以也不清楚会有哪些不同，网上介绍的大部分的安装配置应该都一样，可能细节上有不同，如果以后有时间再做详细补充。

为什么要用react-native实现

1、我本人是后端开发工程师，擅长的是python、php、C++等语言开发。而且我也会前端jquery,angularjs开发，对react开发了解一些，学习react-native相对容易一些
２、react-native可以开发同时兼容Android和iOS的App,方便以后开发一些新的App，虽说react-native不能完全取代两者，但是也是未来的一个趋势。对于性能要求不是很严格的App，完全可以使用react-native实现，这样既节省成本又能节省时间。

为什么要用ubuntu和sublime开发

１、因为我的电脑操作系统就是ubuntu 18，我用sublime的做集成开发，也是没办法
２、本身因为我是后端开发人员，喜欢使用ubuntu做开发，同时也是想看看ubuntu能不能做react-native开发，以及这里面到底有哪些坑，我要填一填，不试试，怎知深浅。
３、说大点，就是为喜欢使用ubuntu+sublime开发的人员先探探路提供点参考。

环境要求

１、硬件最好是配置高点，我的是4核cpu，8G内存，500G硬盘，就是这样的配置，有时还有卡顿。大家参考一下。
２、我的操作系统是ubuntu18.04，如果你的版本比这个低，可能在安装react-native的版本及其依赖的包的版本不一样。
３、一部安卓手机，我的是红米手机，操作系统是MIUI7.1 稳定版

操作系统以及软件安装

４、如果没有安卓手机，那只能使用模拟器了，我使用的是genymotion
关于ubuntu18.04的安装和sublime的安装我这里就不多说了，网上有很多参考，请自行查找安装，不过我提供一些参考地址如下：
ubuntu安装
ubuntu安装sublime

react-native的安装

关于react-native的安装，我参考的是react-native中文网，里面有详细的安装步骤，按照里面的一步一步的安装就行了，不过需要指出一些需要注意的地方。
１、需要能够翻墙，因为里面所依赖的软件包大部分都得翻墙才能通过网络安装。
２、Android Studio 必须安装，虽说不用它做集成开发工具，但是得需要它安装一些安卓开发所必须的包。
３、Watchman的安装遇到点问题，当时折腾了好长时间，官方说明的安装步骤如下：

$ git clone https://github.com/facebook/watchman.git
$ cd watchman
$ git checkout v4.9.0  # the latest stable release
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install

(1)git clone 之后不用再执行第三步，切换分支了，因为master就是最新版本，你也无法切换分支，因为没有那个分支。
(2)第五步的./configure总是报错，基本上都是各种依赖包找不到的问题，那就需要你对ubuntu操作系统有所了解，自行查找并安装。
(3)make的执行时间有点长请耐心等待。
(4)watchman安装完不用单独执行，它是react-native 服务的一个软件依赖，主要是监控文件的修改变化，用于开发过程中的热更新功能

创建项目

react-native init AwesomeProject

这个创建出来的项目版本是0.60，这个自己一定要清楚，因为以后安装的包，都与这个版本有关，有些包是不支持0.6的，到时你还得考虑其他的解决方案。0.60之前的版本好像和0.60之后的版本差别有点大，所以一定要设置好自己创建项目的版本

模拟器genymotion安装

参考Ubuntu安装Genymotion
首先需要安装的是VirtualBox，这个是genymotion的依赖。
genymontion官网这个里面需要申请一个账户，然后下载安装即可。
安装完成之后打开软件Genymotion或是在命令行直接运行genymotion打开界面，如下：

genymotion-1.png
android Api表明手机操作系统的版本，视自己的开发情况选择版本，我选择的是最新9.0版本的，滚动到最下面，右面三个点选择install
genymotion-2.png
选择安装完成后就可以打开模拟器了。
genymotion-3.png

创建react-native start的启动脚本

react-native start 主要是建立项目与模拟器或设备联系。将项目中的变化反应到模拟器或设备上。操作如下：

sudo vim /usr/bin/react-native-start

写入以下脚本

#!/bin/bash
#

echo 256 | sudo tee -a /proc/sys/fs/inotify/max_user_instances
echo 32768 | sudo tee -a /proc/sys/fs/inotify/max_queued_events
echo 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watches
watchman shutdown-server
react-native start --reset-cache

保存并执行

sudo chmod 755 /usr/bin/react-native-start

然后cd到项目的目录中执行，记住一定要到项目目录中执行下面的命令

react-native-start

如果输出的最后一行是以下内容，表示启动成功

Loading dependency graph, done.

但是在出现上面的输出之前，会在下面的状态下停留一段时间，需要耐心等候，如果长时间没有变成done，那就要考虑是不是出问题了。

Loading dependency graph...

编译项目并在模拟器上运行

１、首先是启动模拟器或是用数据线连接手机设备，然后使用adb devices查看设备是否存在
２、手机必须打开开发者模式，选择打开usb调试功能，有些手机你无法找到开发者选项，并不是没有而是隐藏了，例如小米的手机需要在手机的 MIUI版本上连续点击５次才能打开开发者选项，其他手机请自行上网查看，找到打开方法
３、cd到项目目录中执行以下命令进行编译安装

react-native run-android

如果一切运行正常的话，在模拟器或是设备上可以看到以下画面

pixel.png
至此react-native的开发环境已经搭建完成

sublime的配置

sublime之后要做的就是代码编辑，然后运行一下编译脚本就可以了。
代码编辑的插件主要有emmet、jsFormat、SublimeLinter、babel等等。
主要是使用ctrl+b执行编译的操作，在build system中创建一个新的system叫react-native

{
  "shell_cmd": "react-native run-android"
}

注意在执行ctrl+b时面对的文件一定是项目的根目录下的文件，例如App.js或是index.js
刚开始开发之时每次做了修改都执行了以下ctrl+b进行编译，后来才发现其实不用，我们为什么要运行react-native start命令的，就是可以使用热更新操作。看下面的设备配置

模拟器和移动设备配置

模拟器看下图，在右边栏的右下角红色按钮打开控制面板，移动设备需要摇一摇才能打开控制面板，里面经常用的也就以下几个操作
Reload: 重新加载
Debug JS Remotely: 打开远程调试
Enable Live Reload:每次代码修改都重新加载，但是加载都跳转到首页
Enable Hot Reload:每次代码更新都重新加载，但是只更新当前页
Dev Settings:设备配置

pixel-1.png
在开发的过程中，一般的需要打开，Debug JS Remotely，Enable Hot Reload两个操作，如果是移动设备，需要在Dev Settings中设置一下Debug server host & port for device
内容为主机ip:8081, 移动设备和主机必须在同一个网段下。
pixel-2.png
如果在打开Enable Hot Reload遇到报错，请关闭Dev Settings中的JS Minify
pixel-3.png
到此我们只要修改代码并保存，App就实时更新了

总结

以上就是我开发react-native的经历，积累了点经验供大家参考。其实真正的坑还在后面呢。这里就不一一介绍了，下面把我参考的一些网址列出来。同时也非常感谢分享这些方法的人，如果没有他们提供的参考，我也不可能开发出自己的项目。

分享 50 个完整的 React Native 项目
react native 从入门到精通（完）
React Navigation中文网
react-native-vector-icons的图标参考
react-native-swiper组件-横扫你的轮播图
react-native css支持属性
React Native State(状态)使用详解
react-native FlatList 实现列表选中的最佳方式（刷新指定Item）
react-native进度条
React Native常用插件_整理React Native插件系列之插件汇总
react-native-webview
react native webview与H5通信
React Native 动画（Animated）
react-native flatlist 的进阶使用 （头尾，间隔组件和滚动事件）
React Native动画详解
React Navigation API 参考手册 1：Navigation prop