React Native——搭建开发环境、建立Hello World

前言

React Native(简称RN)从诞生以来，就受到了广大开发者的追捧。相比于Native开发，RN开发更为灵活，并且支持跨平台（Android和iOS同时支持），也更方便热更新，最重要的是它基本上可以达到与Native App同样的渲染和体验效果。虽然RN目前还有许多功能不够完善，同时也存在一些兼容性问题，做为Native开发者，咱们仍是能够经过混合开发（RN+原生开发）的模式来规避这些坑，这样也能兼具RN和原生开发的共同优点。

准备

对于前端工程师来讲，学习RN要容易得多，可是对于原生开发者来讲，学习成本仍是相对较大：

首先，你须要有必定的JavaScript基础，对于没有js基础的同窗，想直接就从RN开始，那估计是至关痛苦的。
其次，React做为RN的核心，在开始学习RN以前，至少要对React相关的基础知识有所了解。

若是彻底没有接触过前端，想学习RN的话，建议仍是能够先学习一下html/css、js等基础知识，再开始React、RN的学习，这样可能前期花费的时间和精力比较多，可是后期就要轻松不少，不用在学习RN的中途还要去恶补一些前端的基础知识。

搭建开发环境

由于我使用的是Windows系统，因此下面就介绍下如何在Windows系统下搭建RN开发环境。

参考ReactNative中文网，首先咱们须要装Python2和Node，考虑到可能chocolatey国外网站可能访问较慢，咱们就直接冲Python官网下载Python2，下载地址：www.python.org/downloads/

下载Python2

选择2.7.13版本，注意不要选Python2以上的版本，目前RN还不支持。而后在Node.js中文网下载最新的Node.js的msi安装包，注意根据本身的系统位数选择。下载地址：nodejs.cn/download/

下载Node.js

下载完成后直接安装，安装完成后建议设置npm镜像以加速后面的过程：

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global复制代码

安装Yarn、RN的命令行工具（react-native-cli），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复制代码

安装开发工具

我是作安卓开发，已经有了AndroidStudio开发工具，AndroidStudio安装和android-sdk的配置我就不介绍了，须要注意的是android-sdk路径的环境变量ANDROID_HOME必需要配置，若是以前没有的须要加上。

RN的开发工具备不少，像是Atom、Sublime、WebStorm等前端开发工具都能进行RN的开发。因为笔者长期使用AndroidStudio，因此我就用WebStrom了，由于它们都是由JetBrains出品，操做界面、快捷键、插件都是一致的，不须要进行二次学习。

WebStrom下载地址：www.jetbrains.com/webstorm/do…
下载安装后，只有30天的无偿使用，须要破解的话，网上有不少方式。

建立HelloWorld

打开WebStorm，点击Create New Project建立一个新的RN工程：

选择左侧的React Native标签，location选项为你的工程目录和工程名称HelloWorld，Node interpreter和React Native选项为默认的就行。

点击create后，就开始构建工程了，第一次构建过程当中要去下载RN的依赖包，可能时间比较长，耐心等待。构建完成后，能够看到RN项目的工程目录结构：

其中有几个比较关键的文件：

• -test-，为测试文件，里面存放一些测试用的js文件。
• android，就是一个原生的android工程项目，能够用androidStudio打开进行原生开发。
• ios，就是一个原生的ios工程项目，能够用xcode打开进行原生开发。
• node_module，下载的依赖库都存放在里面，包括React和React Native，至关于* AndroidStudio的External Libraries。
• package.json，RN工程的远程依赖，一般是在根目录经过命令行npm install xxxxxx --savet添加一个库，添加完成后，会把依赖信息自动写在package.json里面，至关于AndroidStudio的build.gradle。
• index.android.js，这是android的React Native入口文件。
• index.ios.js，这是ios的React Native入口文件。

点击WebStorm右上角的下拉按钮，选择Android：

界面上就会出现运行和调试按钮了：

链接到真机，点击执行。执行的过程当中会添加react和react-native的依赖。同时若是默认的gradle版本是你没有使用过的话，也会自动去下载，因此耐心等待。固然最好是在执行以前经过AdnroidStudio打开RN工程下的android项目，将gradle版本修改到本地已有的版本。

运行时，在真机上可能遇到白屏状况，须要开启悬浮窗权限。也极有可能会出现下图左边的错误，点击RELOAD后，又会出现右边的fix方案：

通常的最有可能的仍是最后一种状况，便是运行设备（真机或模拟器）与packager server没在同一个ip，就不能用localhost了。

摇一摇手机，出现对话框：

点击Dev Settings，进入设置界面，点击Debug server hoset &port for device，弹出对话框，输入本身电脑所在的局域网的ip:8081

点击肯定后，回到主界面，摇一摇手机，再次点击对话框中的reload，就运行成功了：

参考：
React Native 中文网
从Android到React Native开发（1、入门）