什么是React Native
React-Native 是由Facebook出品的一款可以使用JavaScript来编写原生app的框架，官方说明是：A framework for building native app with React(一个使用React来编写原生app的框架)，然而这个React也是由该公司出品的一款可以用来编写用户界面的JS库。二者的出现，以其强大的功能和便捷的使用方式迅速被广大开发者使用，并在各大平台的应用研发中占据了自己的一席之地。
GitHub: React-Native , React
搭建React-Native开发环境
1.这一步比较简单，如果不懂，可以参考网上的文章，或者ReactNative官网的相关页面。
2.安装cocoapods，这是一个包管理工具。
3.一个比较好用的文本编辑器。注意，不要使用mac自带的文本编辑器，不好用，如果要用，请把语言设置为英文，否则各种中文全半角要折腾死人。
开始集成
官网的推荐方法是新建ios目录，把我们的东西都放到ios目录里，不过我们不管它。我们可以在我们的项目目录里新建reactnaive目录。用于放置和ReactNative相关的文件和文件夹。
然后打开此文件夹。使用touch新建package.json文件。
{
“name”: “YouProjectName”,
“version”: “0.0.1”,
“private”: true,
“scripts”: {
“start”: “node node_modules/react-native/local-cli/cli.js start”
},
“dependencies”: {
“react”: “16.0.0-alpha.12”,
“react-native”: “0.47.1”
}
这里需要注意将name换成你自己的项目名称就可以了。不建议使用最新的版本，最新的版本有不小的BUG。解决起来很费力费时。
编辑后。回到我们的目录，执行
npm install
此命令将安装所有的之后就是安装React 和React-Native模块，等待终端执行完毕后，该文件夹下会多出一个node_modules的文件夹，里面是所有React 和React-Native相关模块。
接下来是使用cocoapods，安装依赖库，在此之前，需要新建配置文件podfile，根据需要编写并输入以下内容
pod ‘React’, :path => ‘./YourReactNativeFolder/node_modules/react-native’, :subspecs => [
‘Core’, #核心库
‘BatchedBridge’, #RN版本高于0.45之后必须导入
‘DevSupport’, # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
‘ART’,
‘RCTActionSheet’,
‘RCTAdSupport’,
‘RCTAnimation’,
‘RCTCameraRoll’,
‘RCTGeolocation’,
‘RCTImage’,
‘RCTNetwork’,
‘RCTPushNotification’,
‘RCTSettings’,
‘RCTText’,
‘RCTVibration’,
‘RCTWebSocket’, # 这个模块是用于调试功能的
‘RCTLinkingIOS’
]
# 如果你的RN版本 >= 0.42.0，则加入下面这行
pod ‘Yoga’, :path => ‘./YourReactNativeFolder/node_modules/react-native/ReactCommon/yoga’
需要注意的是ReactNative目录的正确性。如果万事OK。就直接执行下面的命令。
pod install
此命令执行完毕后。编译程序，看有无报错，如果没有，则集成成功。
页面嵌入和集成
集成才是我们的最终目的，我们来实现它。首先，新建一个ios的入口文件.index.ioss.js.
此文件是必须创建的，比较简单。
‘use strict’;
import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
View
} from ‘react-native’;
//{‘\n’}换行符
export default class ReactPage extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
这就是所谓的{‘\n’}
React Native
</Text>
<Text style={styles.instructions}>
模拟器中cmd+R刷新页面，cmd+D调出调试菜单
</Text>
</View>
);
}
}const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F2F2F2’,
},
welcome: {
fontSize: 24,
textAlign: ‘center’,
margin: 10,
},
instructions: {
textAlign: ‘center’,
color: ‘#333333’,
marginBottom: 5,
},
});AppRegistry.registerComponent(‘YourProjectName’, () => ReactPage);
然后找到你的Object C代码。找到你要引入的事件处理程序。在对应的页面上增加React的引用。
- #import <React/RCTRootView.h>
然后在事件处理方法中添加如下代码：
NSURL *jsCodeLocation = [NSURL URLWithString:@”http://localhost:8081/index.ios.bundle?platform=ios&dev=true”];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@”AiFlow” initialProperties:nil launchOptions:nil];
rootView.backgroundColor = [UIColor colorWithHexString:@”#F2F2F2″];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
执行。点击。运行。OK。
另外，如果无法展示页面，则需要npm start启动服务端。
当然，这里只是Hello World，剩下的才是重中重。