react-native入门之环境搭建（一）

简介

react-native最低系统要求iOS8.0以上或Android4.1以上，RN需要JS运行环境，在iOS上直接使用内置的JavaScript core，在Android则使用webkit.org官方开源的jsc.so;

RN会把应用的JS代码（包括依赖的framework）编译成一个js文件（一般命名为index.android.bundle或index.ios.js），RN的整体框架目标就是为了解释运行这个js脚本文件，如果是js扩展的API，则直接通过bridge桥接文件调用native方法；如果是UI界面，则映射到virtual DOM这个虚拟的JS数据结构中，通过bridge传递到native，然后根据数据属性设置各个对应的真实native的View；

项目环境推荐：node v8.0.0以下，npm v5.0.0以下（npm是node包管理工具，利用node管理工具n可根据node版本自动限制npm的版本），watchman v4.4.0（无版本限制），特注：由于项目开发时的配置问题，node和npm的版本不能高于之前所用版本，防止出现一些编译及相关用法问题，IDE开发环境：xcode 8.0以上，Android Studio 2.0以上；

模拟器支持，iOS模拟器由xcode自带，无需额外安装，Android模拟器建议使用Genymotion（https://www.genymotion.com/）；工具推荐：VSCode；

主要使用的语法有JSX && JS，语法样例链接如下：
JSX:https://www.gitbook.com/book/hulufei/react-tutorial/details
ES6:http://es6.ruanyifeng.com/

Flex布局：
详情属性介绍：http://reactnative.cn/docs/0.41/layout-props.html
博文推荐：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

项目管理工具有redux && dva，案例使用的是redux:
redux使用文档：http://www.redux.org.cn/#

以上所述，以及基础的原生开发知识构成了React-Native开发的语言基础；
React-Native官网：http://facebook.github.io/react-native/
中文官网：http://reactnative.cn/
gitHub：https://github.com/facebook/react-native

进入http://reactnative.cn/中文官网，查看在macOS系统下iOS和Android相关环境的搭建；

react-iOS必需软件：Homebrew、Node、npm、Xcode；推荐安装：Watchman；
react-Android必需软件：Homebrew、Node、npm、Android Studio；推荐安装：Watchman；特别注意：Android Studio2.0或更高，JDK必需要1.8版本，SDK中的工具，Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须是这个版本）。然后还要勾选最底部的Android Support Repository。比较重要的一点，终端运行vi ~/.bash_profile 配置环境；

http://reactnative.cn/中文官网中提供一些常用的原生组件、原生库，iOS与Android的原生控件略有差异，需要按照实际情况进行相应适配处理；特别要注意的是ListView组件的性能不是很好，因为没有做垃圾回收机制，react-native后来使用FlatList来代替ListView；
Android的有物理返回键，而iOS没有物理返回键，所以要在需要的地方进行特殊处理，以适应Android的物理返回键；
第三方功能组件分享可以在文档左侧的社区资源模块下寻找，https://js.coach/?collection=React+Native

React-Native的生命周期：

  1.getDefaultProps //在组件创建之前，会先调用 getDefaultProps()，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载后，首先调用 getInitialState()，来初始化组件的状态。

  2.​component​WillMount //准备加载组件，会调用componentWillMount()，调用时机：在组件创建，并初始化了状态之后，在第一次绘制render()之前；

  ​3.componentDidMount //在组件第一次绘制之后，会调用componentDidMount()，通知组件已经加载完成；这个函数调用的时候，其虚拟DOM已经构建完成，你可以在这个函数开始获取其中的元素或者子组件了；需要注意的是，RN框架是先调用子组件的componentDidMount()，然后调用父组件的函数；从这个函数开始，就可以和JS其他框架交互了，例如设置计时setTimeout或者setInterval,或者发起网络请求；这个函数只会被调用一次，这个函数之后，就进入了稳定运行状态，等待事件触发；

  ​4.​componentWillReceiveProps //如果组件收到新的属性（props），就会调用componentWillReceiveProps()，输入参数nextProps是即将被设置的属性，旧的属性还是可以通过this.props来获取；在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()来更新你的组件状态，这里调用更新状态是安全的，并不会触发额外的render()调用；
    示例如下：
    componentWillReceiveProps: function(nextProps) {
    ​    this.setState({
    ​        ​likesIncreasing: nextProps.likeCount > this.props.likeCount
        ​​});
    }​

  5.shouldComponentUpdate //当组件接收到新的属性和状态改变的话，都会触发调用shouldComponentUpdate(...)，输入参数nextProps和上面的componentWillReceiveProps函数一样，nextState表示组件即将更新的状态值；这个函数的返回值决定是否需要更新组件，如果true表示需要更新，继续走后面的更新流程；否则，则不更新，直接进入等待状态；默认情况下，这个函数永远返回true用来保证数据变化的时候UI能够同步更新；在大型项目中，你可以自己重载这个函数，通过检查变化前后属性和状态，来决定UI是否需要更新，能有效提高应用性能；

  ​6.componentWillUpdate //如果组件状态或者属性改变，并且上面的shouldComponentUpdate(...)返回为true，就会开始准备更新组件，并调用componentWillUpdate()，输入参数与shouldComponentUpdate一样，在这个回调中，可以做一些在更新界面之前要做的事情；需要特别注意的是，在这个函数里面，你就不能使用this.setState来修改状态；这个函数调用之后，就会把nextProps和nextState分别设置到this.props和this.state；紧接着这个函数就会调用render()来更新界面了；

  7.componentDidUpdate //调用了render()更新完成界面之后，会调用componentDidUpdate()来得到通知，因为到这里已经完成了属性和状态的更新了，此函数的输入参数变成了prevProps和prevState；

  8.​​​componentWillUnmount //当组件要被从界面上移除的时候，就会调用componentWillUnmount()，在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等；

以上RN的生命周期整理来源于：https://www.race604.com/react-native-component-lifecycle/

项目用redux来做数据管理，所以项目文件中会有actions、reducers和store这三个文件；​

拿到一个项目启动时，首先是要去下载它的依赖库，当你新创建它会帮你下好，如果每次更新项目package.json这个依赖文件里有更新的话，那你就必须去更新依赖库；用npm管理依赖，直接npm install；需要注意的是，它会产生一个local文件，会锁一些版本号，要小心一点；

调试的时候，启动时，必须要启动npm的服务，用npm start启动，连接RN端的代码跟原生的代码（调试时必须要用）；

第一次使用时，要先打开模拟器，有时候会出现装成功了但是在模拟器上没起来的情况，需要手动点一下；
​要把JS代码真正打成一个包，需要调成release模式；

环境搭建（终端安装）：

1.安装Homebrew：

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

出现：Downloading Command Line Tools (macOS Mojave version 10.14) for Xcode
Error downloading Command Line Tools (macOS Mojave version 10.14) for Xcode: 网络连接已中断。
原因：因为Xcode的新版本不自动安装Command Line Tools了
解决办法：

xcode-select --install

查看是否安装成功：

brew -v

2.安装nvm:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash

激活nvm（注意：使用nvm时都要进行激活）：

. ~/.nvm/nvm.sh

查看安装版本：

nvm --version

3.安装node:
第一步：安装node版本管理控制器n，先用homebrew安装node：

brew install node

第二步：安装n（npm的全称是Node Package Manager ，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准）：

npm install -g n

查看帮助：

  n --help

查看可用的Node版本：

n ls

第三步：安装不同的版本（8.0.0版本为例）：

n 8.0.0

第四步：用n查看已安装的版本：

n

另附：n的常用管理方法

//安装最新的版本
n latest
//安装稳定版本
n stable
//删除版本x.x.x
n rm x.x.x
//以指定的版本来执行脚本（有多个node版本时）
n use 8.0.0 some.js

以上n管理工具使用方法来自：https://www.jianshu.com/p/a927bcecdbc0

注意：如果执行node -v或者npm -v出现下面错误：

Segmentation fault: 11

执行n命令，显示当前没有选中任何版本。解决方法：用n命令重新设置要使用的版本即可

sudo n 7.8.0

以上解决方法参考自：http://www.mamicode.com/info-detail-1316859.html
原文地址：http://h2appy.blog.51cto.com/609721/1770293
4.安装watchman：

brew install watchman

5.安装cocoapods，参考：https://www.jianshu.com/p/f43b5964f582
由于网络问题，上述方法不可行时，用pods的zip压缩文件解压安装，方法如下：
第一步：终端输入如下命令打开cocoapods的repos文件夹：

cd .cocoapods/repos/
ls
open .

第二步：将pods的master.zip压缩文件拖入repos文件夹下进行解压，如图： 解压pods.png

第三步：安装pods（需要等待一段时间），终端输入：

pod setup

6.iOS开发环境配置（已装Xcode 8.0以上）：
第一步：使用npm安装react-native-cli(此处应注意权限问题，如果遇到权限问题，请在下面的命令前加上sudo)

npm install -g react-native-cli

第二步：初始化工程（直接拷贝，不能sudo，后果自负）

react-native init ReactNativeTestProject（工程名）

编译工程时，要注意先完整的编译一次，然后再执行就可以正常运行了；
ios开发环境配置，参考自：http://www.jb51.net/article/92059.htm
7.Android开发环境配置（已装Android Studio 2.0以上）：
已有zip压缩包，安装Android SDK Build Tools（勾选Android SDK Build-Tools 23.0.1（必须是这个版本））步骤：
第一步：在终端输入如下命令：

cd Library/
open .

第二步：在Library文件夹中创建一个Android文件夹，并将zip压缩包拖入其中解压，如图： Android工具SDK.png

第三步：终端执行如图命令，然后执行如下命令：

open .bash_profile

根目录下.png

第四步：配置 ANDROID_HOME环境变量

在终端中修改文件截图： 修改文件.png
在该位置输入如图路径： ANDROID_HOME环境变量修改.png

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

下载JDK 1.8版本，直接点击安装就行，Android Studio的配置参考官网http://facebook.github.io/react-native/文档步骤进行；

清空node_module的缓存：
第一步：npm指令清除npm缓存

npm cache clean --force

第二步：删除node_module包

注意：

RN项目中index.ios.js和index.android.js都合并到index.js中了！
入门级的简单界面搭建：https://www.jianshu.com/p/063b1b791354

代码编写工具：下载VSCode

本文附录pods可能安装失败的原因：https://www.jianshu.com/p/cebdae006eb5

RN入坑第一篇，续集（加载git下载项目）：https://www.jianshu.com/p/2db7c19edc42
未完待续...