时间过的真快，距离上次的技术研究成果已有近一月未更新了，回想这一个多月以来。一直忙于审核的问题，并与苹果审核员斗智斗勇！
业余时间研究了下React Native，嘿发现还不错哦！至少能够解决苹果审核的更新问题，减少上线拖延对公司的损失，虽然会有少许弱化性能的问题。但是已经是很大进步了！
本篇，站在对React Native一知半解或者没听说过React Native的小白立场上对React Native 的基本介绍与在苹果平台搭建测试iOS设备方面进行相应的介绍！
亲测可用哦！
一.React Native是什么？
1.React 与Native的关系：
React是Facebook推出的一款JaveScript框架，目的是为了前端开发所用！
React ：Web应用开发
React.js：JaveScript开发语言
ReactNative：App移动应用开发
2.与我们移动开发有什么关系？
原生开发:iOS 或者 Android开发
混合开发：Hybrid App(原生Api + Html开发)
React Native开发：
原生开发最大劣势：热更新问题（特别是iOS），还有不能跨平台；
混合开发最大劣势：性能不好；
3.React Native为何能够用于移动端开发原因：
在于虚拟DOM原理：
DOM是什么，可以理解为HTML下的一个一个的页面：
React Native不直接操作DOM，数据发生变化，需要刷新时，React首先创造虚拟DOM，通过一定的机制比对比出改变的DOM，之后再只对改变的DOM进行刷新操作，而不是像原生Web一样全部刷新DOM，从而提高了性能。
4.汇总React Native 的优缺点与使用场景：
优点：跨平台，投资少，热更新，全栈性；
缺点：性能比原生App弱一丢丢而已！
二.搭建Mac下的React Native 的步骤：
这里的安装步骤可以参考后面的链接，但建议参考本人的，因为其中有本人爬过的坑，以及避坑策略和部分连接中无关软件没必要安装等。
以下为部分操作命令成功后展示（没有成功前不是这么简单，一般都会有大量的输出哦！）：
命令用法展示.png
1.安装Homebrew
打开终端，输入以下命令：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
注意：如果安装有/usr/local目录不可写的权限问题，可以用下面的命令修复
sudo chown -R `whoami` /usr/local
2.更改环境下载源
注意：这个步骤不是必须的，但是为了加快下载的速度所做，不要用cnpm安装（如淘宝源的问题等）。
参考这个网站中 http://ban.ninja 更改源的命令
分别使用如下命令（2个命令执行其一即可）
vi ~/.bash_profile
vi ~/.bashrc
打开对应的源文件，看那一个文件中显示的是以export开头的语句，添加下面这句话到对应的文件中。
export HOMEBREW_BOTTLE_DOMAIN=http://7xkcej.dl1.z0.glb.clouddn.com
按下Esc快捷键，同时，输入“：”，wq（保存），如此完成环境源的下载路径配置。
3.安装Yarn：即react native 的命令行工具（react-native-cli）
执行下面的命令，安装Yarn：
npm install -g yarn react-native-cli
安装yarn后设置镜像源，连续执行下面2个命令:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
如果报错EACCES: permission denied，也要类似安装homebrew时的情况一样，修复/usr/local目录命令如下:
(没报错的话请忽略)。
sudo chown -R `whoami` /usr/local
4.推荐安装工具如 Watchman
采用如下命令安装：
brew install watchman
5.推荐使用WebStorm 或Sublime Text 编辑器来编写React Native应用的代码。
6.创建 我们的第一个App的项目：
如下命令：
react-native init MyApp（我的项目名称） --version 0.44.3
其中创建App项目最好加上--version 0.44.3 ，可以创建低一点的版本,否则默认创建最新的版本，即高版本，需要的代码更多一些，所以下载速度慢
有时候会出现部分文件没下载完全，就会出现找不到文件的报错。
此乃我爬过的神坑！
7.运行并测试项目：
进入我们的项目
cd MyApp/
如果第一次使用的话：
react-native run-ios
小技巧：若run-ios执行不成功，需要用Xcode打开我们的项目，也可以在第一次运行iOS模拟器之后，使用cmd +R来处理。
react-native start
最后附上我第一次运行成功之后的截图：
挺有成就感哈！.png
三.编制我们的第一个React Native的程序：
代码如下：
// 1.第一个项目Hello World！
// 引入依赖
import React,{Component} from 'react';
import {AppRegistry,Text} from 'react-native';
// Hello 相当于一个组件
// Component 基本组件
class Hello extends Component {
// 返回渲染内容
render() {
return (<Text >Hello world!</Text>);
}
}
// 注册项目的根组件：第一个参数为项目名称 ，第二个参数为注册的基本组件
AppRegistry.registerComponent('MyDemo',() =>Hello);
最后附上自己参考学习的资料：
React Native 中文网：
http://reactnative.cn/docs/0.47/getting-started.html#content
欢迎交流，后续会把关于React Native 的 控件，Props ，State，热更新等问题一并解决，共同学习吧！
网友评论