react-native

因为最近老大突然提到了原生app开发，所以我。。。

所以我想到了react-native、flutter当然还有uni-app，当然这些写出来的app不能直接和原生比，而是只是接近原生的渲染机制，我和一个做了几年安卓原生的前辈交谈过，他认为这种机制更偏向于做一些数据渲染的应用，如果太多动画的话是跟不上原生安卓的体验的。

在做任何东西之前，先要搭建环境，即使是强无敌的jquery也要先下载jquery源码或者去BootSDN等引外链

开发的平台

macOS || Windows || Linux => iOS || Android

环境搭建

搭建之前温馨提示几点：
1、需要全程保持“科学上网”，否则能ERROR或者跳网址到你怀疑人生
2、因为环境需要，npm的镜像可以设置成淘宝的镜像，否则还是要依赖“科学上网工具”
3、不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！
4、Node的版本必须大于等于10
5、Python的版本必须为 2.x（不支持 3.x）
6、JDK的版本必须是1.8（我用的1.7，目前不支持 1.9 及更高版本）。

必须安装的依赖

有：Node、React Native命令行工具、Python2 以及JDK和Android Studio（虽然你可以使用任何编辑器来开发应用，但你仍然必须安装 Android Studio来获得编译 Android 应用所需的工具和环境。）

Node安装是每个前端的标配（略），安装完成后用node -v查看版本号

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。安装命令：

npm install -g yarn react-native-cli

yarn的镜像也可以设置成淘宝镜像

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

Android开发环境

请注意！！！国内用户必须必须必须有稳定的翻墙工具，否则在下载、安装、配置过程中会不断遭遇链接超时或断开，无法进行开发工作。某些翻墙工具可能只提供浏览器的代理功能，或只针对特定网站代理等等，请自行研究配置或更换其他软件。总之如果报错中出现有网址，那么 99% 就是无法正常翻墙。

安装Android Studio,如果科学上网不了的话，即使有安装包安装过程也极大概率出问题，所以这一步先科学上网再继续

安装界面中选择"Custom"选项，确保选中了以下几项：
Android SDK
Android SDK Platform
Performance (Intel ® HAXM) 
Android Virtual Device

然后点击”Next”来安装选中的组件。(如果选择框是灰的，你也可以先跳过，稍后再来安装这些组件。),看到欢迎界面就是安装完成了，然后继续下一步

安装 Android SDK

Android Studio默认会安装最新版本的Android SDK。目前编译React Native应用需要的是Android 9(Pie)版本的SDK（注意 SDK 版本不等于终端系统版本，RN目前支持android4.1 以上设备）。你可以在Android Studio的 SDK Manager中选择安装各版本的SDK。

在上面那一步安裝完成的Android Studio的欢迎界面中找到SDK Manager。点击”Configure”，然后就能看到”SDK Manager”。（SDK Manager还可以在Android Studio 的”Preferences”菜单中找到。具体路径是Appearance & Behavior → System Settings → Android SDK。）

在SDK Manager中选择”SDK Platforms”选项卡，然后在右下角勾选”Show Package Details”。展开Android 9 (Pie)选项，确保勾选了下面这些组件（再次提醒你需要科学上网工具，否则看不到接下来的界面）：

Android SDK Platform 28
Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）

然后点击”SDK Tools”选项卡，同样勾中右下角的”Show Package Details”。展开”Android SDK Build-Tools”选项，确保选中了React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。

最后点击”Apply”来下载和安装这些组件。

配置系统环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

在系统的环境变量创建一个名为ANDROID_HOME的环境变量（用户变量也可以），指向你的Android SDK所在的目录，也就是C:\你的电脑用户名\AppData\Local\Android\Sdk，这是Android Sdk默认的安装目录（不信的话可以在Android Studio的”Preferences”菜单中查看SDK的路径，具体是Appearance & Behavior → System Settings → Android SDK。弄好之后关闭当前的命令行工具重新打开，新配置的环境变量才生效

platform-tools目录添加到环境变量Path中

这个目录默认的路径是c:\Users\你的用户名\AppData\Local\Android\Sdk\platform-tools

做好了上面这些，接下来就可以开始你想做的了，就是建个项目跑一跑，其实只要上面的那些环境建好了，接下来的步骤都比较顺畅
创建一个react-native的项目

react-native init AwesomeProject

可以使用–version参数（注意是两个杠）创建指定版本的项目。例如react-native init MyApp –version 0.44.3。注意版本号必须精确到两个小数点。Windows 用户请注意，请不要在某些权限敏感的目录例如 System32 目录中 init 项目！会有各种权限限制导致不能运行！

建好的目录结构是这样的

创建好项目之后就可以运行了，运行的顺序也很讲究
1、启动Android Studio打开项目文件下面的android下面的app，然后Create Virtual Device创建一台虚拟安卓设备，然后开机

Android Studio

2、打开了安卓虚拟设备之后启动项目

cd AwesomeProject
react-native run-android

如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。第一次运行时需要下载大量编译依赖，耗时比较久。此过程严重依赖稳定的翻墙工具，否则将频繁遭遇链接超时和断开，导致无法运行。

如果运行之后安卓设备打开的界面是爆红的错误，请执行一个npm install将缺失的一些依赖安装上，然后执行react-native start启动项目

start

然后在Android Studio上点击编译并执行的绿色三角按钮，将app跑起来

run

那项目跑起来之后如何去修改里面的程序，写成自己想要的呢，其实和react一样，它的入口组件也是App.js,简单举个例子，我们改掉里面的小部分内容，其他就保留原样展示

code1

code2

code3

代码改动之后，重新编译然后启动发现app界面的内容没有变化的话，你可能会运行react-native run-android，让它重新打包，接着再react-native start启动，然后发现，App界面还是没有更新。这时候可以执行一下这个命令再启动项目

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

也就是这样

如果有index.android.js，那么可以这样做：

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

之后再运行react-native start，修改的内容就更新了

App

最后再解释一下这个项目的目录结构

名称	描述
android	Android项目目录，包含了使用AndroidStudio开发项目的环境配置文件
ios	iOS项目目录，包含了XCode的环境
node_modules	基于node文件依赖系统产生的相关依赖和第三方lib
index.js	ios或android的入口，已经使用index.js代替index.ios.js/index.android.js，android中配置application文件的getJSMainModuleName()配置入口
app.json	app的json文件
package.json	项目基本信息以及依赖信息
package-lock.json	npm install生成的文件，记录当前npm package的信息
App.js	相当于Android的MainActivity，可以根据自己的需要进行修改或者删除（同时要修改index.js的注册的组件入口js文件名）
.babelrc	Babel配置文件，在.babelrc配置文件中，主要是对预设（presets）和插件（plugins）进行配置，因此不同的转译器作用不同的配置项
.buckconfig	Buck的配置文件，buck是Facebook开源的高效构建系统
.flowconfig	Flow的配置文件，flowconfig是是Flow的配置文件
.gitattributes	git配置文件，指定非文本文件的对比合并方式
.gitignore	git配置文件，用于忽略你不想提交到Git上的文件
.watchmanconfig	watchman的配置文件，watchman用于监控文件变化，辅助实现工程修改信息