ReactNative系列（一）：简介及环境搭建

ReactNative.jpg

前言：

  最近半年多因为项目需要和自己的兴趣，由Android转向ReactNative，从零到一的开始学习，前后经历了两个项目，也算有自己的一份理解和心得！正好最近有空闲时间，所以试着由浅入深整理分享出来，一是为了记录分享；二是为了回顾整理，提升自己！

ReactNative整理：《ReactNative系列》

---

一、ReactNative基本知识

1. 简介（什么是ReactNative？）

  React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
  React Native使你能够在Javascript和React的基础上获得完全一致的开发体验，用同一套JS代码，可以分别在Android和iOS两个平台上达到相同的运行效果。React Native着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once, write anywhere)。

2. RN的优缺点

优点：

• 跨平台兼容性
    对于RN而言，同一套代码可以同时部署于Android和iOS两个不同操作系统，并且呈现出相同的运行效果。对于很多公司来说，RN可以节约许多开发成本，本来需要Android和iOS两个人的开发量，现在一个人就可以完成，也为程序员腾出更多时间做别的任务；
• 学习成本低
    由于RN用的是React框架，有前端开发经验的会降低很大一部分学习成本，有事半功倍的效果。当然，对于做原生开发的同学，相对会麻烦，毕竟是新的语言技术栈。
• 便于调试
    不需要频繁编译，只需要Reload或者HotReload就可以。修改过的JS代码重新装载就能看到修改后的效果，用Chrome浏览器调试，可以打断点Debug，也可以打印日志。
• 打包热更新
    更新APP版本只需要替换JSBundle就可以，避免了频繁发版，审核等繁琐步骤。

缺点：

• 性能上的缺陷
    业务场景或数据处理相对少的情况下，性能与原生差异较小；但如果业务场景比较复杂，数据处理比较多的时候，性能、体验上要比原生差，能明显感知到卡顿，不够流畅。
• 特殊问题处理
    因为一套代码运行在两个不同平台，总会遇到一些问题是某个平台特有的，需要特殊处理，所以需要对两个平台有一定程度的认知。
• 未成熟的框架
    虽然RN有诸多优点，但到现在为止还没有个相对稳定的成熟版本，所以开发中会遇到许多坑，需要逐一踩过填平才行。

3. React相关

  ReactNative是基于React框架而设计，因此需要对React有一定了解，下面提供几个React相关链接：
官方文档：React中文官方文档
阮一峰博客：React文档-阮一峰
官方Git地址：React官方地址-Git

---

二、ReactNative搭建开发环境

注：因为公司配备的是MacPro，所以开发用的工具都是基于macOS的。
先推荐下RN的官方文档，里面有学习过程中所需要的绝大多数知识和问题的解决办法： https://reactnative.cn/docs/getting-started/
1. 安装 Homebrew
  Homebrew是一款MacOS缺失的软件包管理器，使用它能安装Apple没有预装，但你需要的东西。将以下命令粘贴至终端即可安装：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

看到网上很多同学说，安装会遇到/usr/local/目录不可读写的情况，可以用下面命令修复：

sudo chown -R 'whoami' /usr/local

2. 安装 Node.js
  使用 Homebrew 来安装，命令行中执行如下命令：

brew install node

3. 安装 Watchman
  Watchman 是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能。

brew install watchman

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

npm install -g yarn react-native-cli

完成Yarn安装之后，就可以用yarn代替npm install命令，用yarn add 第三方库名称代替npm install 第三方库名称
5. 安装AndroidStudio或者Xcode

• Xcode需要安装9.4或者更高版本。可以通过 App Store 或是到Apple 开发者官网上下载。
• Android开发环境搭建
  （1）ReactNative需要JDK，可以到JDK官网下载安装。
  （2）安装 AndroidStudio 以及 Android SDK（具体操作就不详细说明了，可以查询上述ReactNative官方文档，或者Android开发环境搭建）。
  （3）主要解释下配置 ANDROID_HOME 环境变量
  React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。
  具体的做法是把下面的命令加入到~/.bash_profile文件中：

注：~表示用户目录，即/Users/你的用户名/，而小数点开头的文件在 Finder 中是隐藏的，并且这个文件有可能并不存在。可在终端下使用vi ~/.bash_profile命令创建或编辑。
另外：如果不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚。

步骤：
1、终端输入 vi ~/.bash_profile;
2、按字母键 “i”，进入文件编辑模式，输入以下命令（以各自实际位置为准）：

export ANDROID_HOME=$HOME/Library/Android/sdk

3、保存输入，并退出；
4、执行source $HOME/.bash_profile命令来使环境变量设置立即生效，否则需要重启电脑才会生效。
5、终端输入echo $ANDROID_HOME命令，检验配置是否成功。

至此，ReactNative需要的开发环境搭建完成，可以尝试创建新项目运行。

创建新项目

可以使用ReactNative命令行工具创建工程，例如：工程命名为RNDemo。

react-native init RNDemo

注：你可以使用--version参数，创建指定版本的项目。例如react-native init RNDemo --version 0.44.3。

如果想在Android或者iOS运行项目，可用如下命令：

react-native run-android
react-native run-ios

   运行图就不在这里展示了，希望可以帮到大家，如果觉得有帮助，可以点赞关注，有不对或者不够完善的地方指出来一起讨论，谢谢~~！！