前言
借着公司给的机会，这段时间对React Native的研究，算是有了一个清晰的认识，这里不讨论它能不能替代原生，因为这毫无意义，一门技术的兴起，肯定有它的必然性，何况现在阿里的Weex，Google的Flutter，以及Koltin Native开发，都在往垮平台发展，趁着这些技术都还在孵化期，是不是应该学一门来提高下综合竞争力。而选择React Native 也是因为它更成熟，更稳定，社区又多，问题很容易解决。下面搭建环境开始介绍，一步一步深入学习。
环境
像android需要Android Studio、Android SDK、JAVA JDK一样，React Native 也是同样的道理，它需要很多东西的支撑，才能顺利进入编码阶段（下面ReactNative简称RN），下面开始搭建，主要介绍Mac安装教程
Homebrew
安装NodeJS必备系统管理，安装教程 这里推荐官方地址
Node
React Native目前需要NodeJS 5.0或更高版本，安装命令
brew install node
实际开发中更推荐使用Yarn，因为Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载
brew install yarn
详细安装教程请看地址
React Native的命令行工具 react-native-cli
用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。安装命令如下：
npm install -g yarn react-native-cli
Xcode、Android Studio
Mac系统通过商店安装Xcode，Android Studio推荐官网下载：
到此万事具备，只欠东风，你需要一个趁手的工具来开发，就像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更适合。
网友评论