1 与现有的应用程序集成(IOS)
由于React并没有做出关于你其他的技术堆栈的假设——通常在 MVC 中简单的用 V 来表示——这很容易嵌 入到现有non-React Native应用程序中。事实上，它与另外的最佳实践社区工具集成了，如 CocoaPods。
1.1 需求
• CocoaPods - gem install cocoapods
• Node.js - brew install node
1.2 用CocoaPods安装React Native
CocoaPods是iOS/Mac开发的管理工具包。我们需要用它来下载React Native。如果你还没有安装CocoaPods，请查看本教程。
当你准备使用CocoaPods工作时，添加以下行到 Podfile 中。如果你没有，那么在你的项目的根目录下创建它。
pod 'React'
pod 'React/RCTText'
# Add any subspecs you want to use in your project
记得安装所有你需要的subspecs。没有pod 'React/RCTText'，元素不能使用。 然后安装你的pods:
$ pod install
1.3 创建你的ReactNative应用程序
有两块你需要设置:
1. 根JavaScript文件，该文件将包含实际的React Native应用程序和其他组件
2. 包装Objective - C代码，将加载脚本并创建一个RCTRootView 来显示和管理你的React Native组件 首先，为你的应用程序的React代码创建一个目录，并创建一个简单的 index.ios.js 文件:
$mkdir ReactComponent
$touch index.ios.js
为 复制&粘贴以下starter代码——它是一个barebones React Native应用程序:
'usestrict';
var React = require('react-native');
var{
Text,
View
} = React;
var styles = React.StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red'
}
});
class SimpleApp extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>This is a simple application.</Text>
</View>
)
}
}
React.AppRegistry.registerComponent('SimpleApp',() => SimpleApp);
SimpleApp将是你的模块名称，这将在后面使用。
1.4 将容器视图添加到你的应用程序中
现在，你应该为ReactNative组件添加一个容器视图。在你的应用程序中它可以是任何的 。
integration app
但是，为了使代码简洁，让我们把 归入子类。让我们把它命名为 。打开你的Yourproject.xcworkspace，并创建一个新类(你可以把它命名为任何你喜欢的名字:))。
// ReactView.h
#import
@interface ReactView : UIView
@end
在一个视图控制器中，想要管理这一视图，继续添加一个出口并将其连接:
// ViewController.m
@interface ViewController ()
@property (weak, nonatomic) IBOutlet ReactView *reactView;
@end
在这里我简单的禁用了 AutoLayout。在实际产品中，你应该自己打开AutoLayout，并且设置约束。
1.5 为容器视图添加RCTRootView
在ReactView.m中，我们首先需要用index.ios.bundle的URI启动 RCTRootView。index.ios.bundle将被packager创建，并由React Native服务器服务，这将在稍后讨论。
NSURL *jsCodeLocation = [NSURL URLWithString: @"http://localhost:8081/index.ios.bundle"];
//For production use, this `NSURL` could instead point to a pre-bundled file on disk:
// NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource: @"main" withExtension: @"jsbundle"];
//To generate that file, run the curl command and add the output to your mainXcode build target:
// curlhttp://localhost:8081/index.ios.bundle -o main.jsbundle
RCTRootView *rootView = [[RCTRootView alloc]initWithBundleURL: jsCodeLocation moduleName: @"SimpleApp" launchOptions: nil];
然后把它作为ReactView的子视图添加。
[self addSubview: rootView];
rootView.frame= self.bounds;
1.6 启动开发服务器
在根目录，我们需要启动React Native开发服务器。
(JS_DIR=`pwd`/ReactComponent; cdPods/React; npm run start -- --root $JS_DIR)
这个命令将在我们的CocoaPods依赖中启动一个ReactNative开发服务器，来创建捆绑脚本。 ——root选项表明ReactNative应用程序的根——这将是我们包含单一index.ios.js文件的ReactComponents目录。该运行的服务器将通过http://localhost:8081/index.ios.bundle把index.ios.bundle打包成可访问的文件。
1.7 编译和运行
integration app
1.8 总结
所以，当 RCTRootView初始化时，它会尝试从React Native开发服务器中下载，解析并运行包文件。这意味 着你所需要做的就是为 RCTRootView 实现你自己的容器视图或视图控制器—— RCTRootView 摄取了捆绑的JS并呈现出你的React组件。万岁!
你可以在这里查看一个示例应用程序的完整源代码。
2 参考链接
React Native之调用安卓原生控件
http://blog.csdn.net/jj120522/article/details/51968278
React-Native之Android:原生界面与React界面的相互调用
http://www.jianshu.com/p/f1b265e80317
react-native调用原生模块详解
http://blog.csdn.net/woaini705/article/details/50899946
使用React-Native Code push热更新 增量更新 动态修复bug移动开发
http://www.jianshu.com/p/ec8d64681e53
React Native官方文档中文版
http://wiki.jikexueyuan.com/project/react-native/native-ui-components.html
React中文版
http://wiki.jikexueyuan.com/project/react/
React Native中文网
http://reactnative.cn
React Native中调用原生android模块Toast例子及说明
http://www.tuicool.com/articles/ayyQbyz
React Native教程第一部分:Hello, React
http://www.tuicool.com/articles/MJZ3ym
