React Native【学习总结】-【环境搭建】

前言

借着公司给的机会，这段时间对React Native的研究，算是有了一个清晰的认识，这里不讨论它能不能替代原生，因为这毫无意义，一门技术的兴起，肯定有它的必然性，何况现在阿里的Weex，Google的Flutter，以及Koltin Native开发，都在往垮平台发展，趁着这些技术都还在孵化期，是不是应该学一门来提高下综合竞争力。而选择React Native 也是因为它更成熟，更稳定，社区又多，问题很容易解决。下面搭建环境开始介绍，一步一步深入学习。

环境

像android需要Android Studio、Android SDK、JAVA JDK一样，React Native 也是同样的道理，它需要很多东西的支撑，才能顺利进入编码阶段（下面ReactNative简称RN），下面开始搭建，主要介绍Mac安装教程

Homebrew

安装NodeJS必备系统管理，安装教程 这里推荐官方地址

https://brew.sh/index_zh-cn

Node

React Native目前需要NodeJS 5.0或更高版本，安装命令

brew install node

实际开发中更推荐使用Yarn，因为Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载

brew install yarn

详细安装教程请看地址

https://yarnpkg.com/zh-Hans/docs/install

React Native的命令行工具 react-native-cli

用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。安装命令如下：

npm install -g yarn react-native-cli

Xcode、Android Studio

Mac系统通过商店安装Xcode，Android Studio推荐官网下载：

https://developer.android.com/studio/index.html?hl=zh-cn

到此万事具备，只欠东风，你需要一个趁手的工具来开发，就像Android 需要Android Studio一样，这里推荐WebStorm，官方推荐Atom但真的很难用（不推荐使用）

下载完WebStorm，下面开始就新建一个Demo了

Demo项目创建

打开WebStorm，点Create New Project 选择 React Native，在红色箭头处修改Demo的项目名字，默认是APP的名字。

创建

最后点击Create按钮。会进入一段时间的构建过程，此过程下载node_modules，相当于java的lib依赖。构建过程挺长，这个时候你需要倒杯水，耐心等一下。

构建成功

如果你看到这个目录结构，恭喜已经构建完毕，这个时候可以试着运行下看看，打开Terminal，输入以下命令，运行Android 或者IOS项目

react-native run-ios 
react-native run-Android 

苹果会自动唤起模拟器，android 需要手动唤起，打开Android Studio手动唤起。android是走的gradle构建过程所以要注意本地的版本和此项目中配置的版本是否一致，否则会中途失败，需要重新运行，而且android还缺少了SDK的路径配置，导致第一次构建找不到SDK，这个问题很容易解决，你需要自己手动将已有Android Studio项目中根目录中的 local.properties 文件拷贝到RN项目android 包目录下。

原有项目配置文件

最终跑起来的效果如图，恭喜已经成功了

RN APP

到此就已经可以进入下一步了，进入组件学习，API学习，以及跨平台的适配问题，在接下来学习的过程中，详细介绍。

总结

总体来说，RN对于开发者还是很友好的，有很多的特色，比如JSX以及Flexbox布局还有各个组件，最终会映射到IOS、Android原生组件，其实运行起来的体验和原生没有区别，最后引用官方一句话Learn Once，Write Anywhere，预祝RN越来越好。但个人认为，从长远来看RN是个苦差事，因为它要不断适配原生组件，来应对未来的挑战，这点是个短板，倒不如Flutter来得彻底，但又从开发成本，和公司利益最大化的今天，还是RN更适合。