有图有真相
react
优点
- 跨平台，兼容Web、iOS、Android三大主流平台
- React调用原生控件，性能优于H5框架
- 更好的手势识别
- 实时部署更新，再也不担心应用市场审查缓慢设计理念：既拥有Native的用户体验，又能保留React的开发效率
搭建开发环境
1、安装nodejs， https://nodejs.org/en/；
brew install nvm# mkdir ~/.nvm 创建nvm的工作空间
vim ~/.bash_profile 编辑环境变量source $(brew --prefix nvm)nvm.sh 使生效
nvm 检查
nvm install node && nvm alias default node 安装node.js
nvm use --delete-prefix v4.2.1
2、然后推荐使用Homebrew 的方式来安装 nvm，watchman和flow：Homebrew是mac上的一个包管理器，到Homebrew主页使用主页上的那条命令进行Homebrew的安装。
检查Homebew:# brew -v
先安装homebrew（参考官网）：ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
// 通过Homebrew 安装 watchman 和 flow
brew install watchman
brew install flow
// 后面两个命令是为了保险起见，所以写进去。brew install node
brew install nvm
建议定期运行 brew update && brew upgrade 来使您的应用程序保持最新状态
3、安装react native命令 :
sudo npm install -g react-native-cli
4、创建react native项目：在终端，找到你希望保存的项目文件，然后运行命令：
react-native init projectName
切换到BookSearch文件夹
cd projectName
open projectName.xcodeproj
react-native init卡很久的解决办法：
镜像使用方法（三种办法任意一种都能解决问题，建议使用第三种，将配置写死，下次用的时候配置还在）：
1.通过config命令npm config set registry https://registry.npm.taobao.orgnpm info underscore (如果上面配置正确这个命令会有字符串response)
2.命令行指定npm --registry https://registry.npm.taobao.org info underscore
3.编辑 ~/.npmrc 加入下面内容registry = https://registry.npm.taobao.org
演示：
cd ~/vim .npmrc
输入a添加内容
点击esc,输入:wq保存退出
5.打开projectName下的ios启动文件，用xcode打开再运行，会出现以下画面：
reactNative-projectName
运行项目
- iOS: 用xcode打开运行.
- Android: react-native run-android.
补充
- iOS所需环境：Xcode6.3及以上版本。
- Android所需环境:
1、JDK-配置环境变量
2、Android SDK-配置环境变量
3、安装build-tools23.0.1以上、api23、Android Support Repository4.安装Intel x86 Atom System Image(如果用genymotion或真机可不安装)
项目结构介绍
project-layout
- 首先index.android.js、index.ios.js、package.json是最主要的三个文件。
- android和iOS文件夹基本不会动，主要是编辑index.ios.js或者index.android.js,另外* node_modules文件夹是react native的一个库工程文件， 还有package.json是对整个工程的一些重要信息的说明，比如工程名称、版本号等等。
布局
Flexbox是css3里边引入的布局模型-弹性盒子模型，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能够适应不同屏幕的宽度。React Native中的Flexbox是这个规范的一个子集。
Flexbox:浮动布局、不同宽度屏幕的适配、宽度自动分配、水平垂直居中
Flexbox属性
容器属性：
1、flexDirection
2、flexWrap
3、alignItems
4、justifyContent元素属性：
1、flex
2、alignSelf通过StyleSheet声明样式 。
