reactNative 快速搭建

有图有真相

---

react

React Native的优点：

---

• 跨平台，兼容Web、iOS、Android三大主流平台
• React调用原生控件，性能优于H5框架
• 更好的手势识别
• 实时部署更新，再也不担心应用市场审查缓慢设计理念：既拥有Native的用户体验，又能保留React的开发效率

搭建React Native开发环境

---

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或真机可不安装)

React Native项目结构介绍

project-layout

• 首先index.android.js、index.ios.js、package.json是最主要的三个文件。
• android和iOS文件夹基本不会动，主要是编辑index.ios.js或者index.android.js,另外* node_modules文件夹是react native的一个库工程文件， 还有package.json是对整个工程的一些重要信息的说明，比如工程名称、版本号等等。

React Native布局

---

Flexbox是css3里边引入的布局模型-弹性盒子模型，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能够适应不同屏幕的宽度。React Native中的Flexbox是这个规范的一个子集。
Flexbox:浮动布局、不同宽度屏幕的适配、宽度自动分配、水平垂直居中

Flexbox属性

• 容器属性：
  1、flexDirection
  2、flexWrap
  3、alignItems
  4、justifyContent

• 元素属性：
  1、flex
  2、alignSelf

• 通过StyleSheet声明样式 。