React Native环境配置和简单使用

前言

---

• 学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习

• 本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢

• 文章第一版出自简书，如果出现图片或页面显示问题，烦请转至 简书 查看 也希望喜欢的朋友可以点赞，谢谢

更新公告：

更新内容：
- 新增 github 下载的项目运行不了 这小节（之前忘记写了，抱歉）

了解 React Native

---

• 大家都知道，开发原生 App 的成本很高，但是目前基于原生开发仍然是必需的，随着 HTML5 的出现，我们可以使用 Web 开发，虽然能够实现在所有有浏览器的平台上使用并且支持试试热部署，但是在体验方面仍无法超越原生 App ，那么有没有成本较低，又比较好的解决方案呢？答案就是 Native 相对于 Web，Native 有下面几点优点

  • Native 的原生控件有更好的体验（目前认为最大的优势）
  • Native 有更好的手势识别
  • Native 有更合适的线程模型（Web Worker 也可以解决这部分问题，但是在图形解码、文本渲染上仍然没办法多线程渲染，这样就会影响 Web 展示的流畅性）
  • Native 的流畅度目前和原生的保持在同一层次（在优化好的前提下）

• React Native 是 Facebook 在 F8 大会开源的，在不到一年的时间内成为手机端必不可少的开发模式，像国内Pad版的QQ空间、淘宝等都是使用 React Native 开发的，其中做得比较好的当属淘宝

• React Native 设计理念就是即拥有 Native 的用户体验，又保留 React 的开发效率
• 开发者可以灵活使用 HTML 和 CSS布局，使用 React 语法构建组件，实现 H5, iOS, Android 多端的代码复用，大概结构如下图

React Native 开发注意事项

---

• 目前React Native 在 iOS 上仅仅支持 iOS7 及以上操作系统，Android 仅支持 Android4.1 及以上操作系统，github下载地址 官方文档
• React Native 的版本更新速度特别快，如果没有比较好的 JavaScript 基础，下列的建议还是必要参考的
  
  • 对于部分复杂的应用，考虑原生 + React Native 混合开发方式

React Native 开发环境配置

---

• 在安装 React Native 之前我们需要先配置一下所需的开发环境，具体详细见下面

• 环境要求

  • 安装 Homebrew（ Homebrew 是 OSX 的套件管理器，我们可以通过它获取并安装很多需要的组件
    
    • 安装方式：打开 Mac 的终端 → 粘贴命令 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    • 验证是否安装成功：打开 Mac终端 → 粘贴命令 brew -v，出现类似下列提示表示安装成功

  

• 安装 WatchMan（该插件用于监控bug文件和文件变化，并且可以出发指定的操作）

  • 安装方式：打开Mac的终端 → 粘贴命令 brew install watchman
  • 验证是否安装成功：待看到类似以下的提示表示安装成功