简单介绍
react native是facebook开源的一个项目，它结合了H5页面的灵活性和原生应用的高用户体验性，可以说是两者比较完美的结合。而且现在随着安卓那边资源的整合正在往跨平台的路上大步前行了。当前已经被很多国内主流的大公司改造并应用，比如阿里和携程等等。
基础环境搭建
nvm的安装
nvm的安装需要使用官方教程
git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
. ~/.nvm/nvm.sh
添加环境变量
export NVM_DIR="$HOME/.nvm"
激活nvm
$NVM_DIR/nvm.sh
附加环境的搭建和使用
nvm install node && nvm alias default node
brew install watchman
brew install flow
更新本地的库
brew update && brew upgrade
快速开始体验基础环境
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm install -g react-native-cli
react-native init AwesomeProject
cd AwesomeProject
用xcode打开运行一下吧
React Native初遇
对于React-Native开发，仅仅有基础前端开发的知识是不够的，你还需要了解和掌握的有：
Node.js基础
JSX语法基础
Flexbox布局
PS 友情提示： 如果不小心将电脑默认的服务器关闭后，可以通过以下方式运行： 切到项目的根目录，命令行输入npm start即可，这样即可开发终端监听。实际上也是node.js的监听服务开启而已。
React Native中文翻译资料网站：传送门
如何引入React Native到当前的工程中
在这里我们先来创建一个xcode工程，命名为ReactNativeDemo
前提是必须先要把React Native的基础环境搭建完毕，如果没有好得话可以参见我之前的博客来搭建基础环境，包括node 和cocoapods环境
cd {workspacce}
npm install react-native --save
vim Podfile
# 取决于你的工程如何组织，你的node_modules文件夹可能会在别的地方。
# 请将:path后面的内容修改为正确的路径。
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# 添加其他你想在工程中使用的依赖。
]
pod install
然后在工程目录下创建index.ios.js
vim index.ios.js
'use strict';
var React = require('react-native');
var {
Text,
View
} = React;
var styles = React.StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red'
}
});
class ReactNativeDemo extends React.Component {
render() {
return (
This is ReactNative Demo .
)
}
}
React.AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);
到这里跟官方文档教程保持一致,然后就是应用和使用了
在需要使用的地方创建一个ReactNativeView，其实React Native完全可以看做是一个UIView的子类来使用
在需要引用的地方添加以下代码
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
RCTRootView *rootView = [[RCTRootView alloc]initWithBundleURL:jsCodeLocation moduleName:@"ReactNativeDemo" initialProperties:nil launchOptions:nil];
[self addSubview:rootView];
rootView.frame = self.bounds;
然后启动电脑的node服务
cd node_modules/react-native
npm start
下面可以尝试运行工程了
我在尝试的时候遇到了一个问题就是一直不成功，原因在于ios9限制了http的使用，需要强制使用http的方式，具体配置方式可以网上自行搜索添加。
参考学习资料
