现在集成RN的越来越多，但是直接使用RN来搭建整个项目的并不是很多，大多数还是想在项目中的部分模块集成RN，比如首页的动态更新，换肤等等。昨天做了下原生app中集成RN的小例子，做下记录，以便日后查阅。
CocoaPods版本 1.0.1
react-native-cli版本1.0.0
node版本v4.2.2
1、搭建RN的开发环境，只要能让官网RN的demo跑起来就行
2、准备一个用于集成RN的app
3、在项目根目录创建package.json文件，内容如下
{
"name": "项目名称", "version": "0.0.1",
"private": true,
"scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" },
"dependencies":
{
"react": "15.0.2",
"react-native": "0.26.1"
}
}
4、直接根目录(package.json所在目录)执行npm install，等待node_modules下载完成，会在在当前目录生成node_modules文件夹
5、添加Podfile文件，如果本来就有直接添加内容如下
//其中的path路径是相路径，根据自己的项目结构来定
//subspecs：是我们将要用的模块
target '项目名称' do
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTNetwork'(这里必须有)
'RCTWebSocket',
]
end
6、执行pod install
7、在项目根目录创建RN入口文件index.ios.js(iOS入口)建议使用web开发工具编辑，例如webstorm编辑入口js文件，
'use strict';
import React,{Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var HomeViewController = require('./home.js');
class RNLession extends Component {
render() {
return (
<HomeViewController />
);
}
}
// Module name
AppRegistry.registerComponent('RNLession', () => RNLession);
//home.js(首页模块)
'use strict';
import React,{Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View} from 'react-native';
class HomeViewController extends Component{
render(){
return(
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white'}}>
<Text style={styles.TextStyle}>中秋快乐</Text>
</View>
);
}
}
var styles = StyleSheet.create(
{
TextStyle:
{
justifyContent: 'center', alignItems: 'center', backgroundColor: 'white',fontSize:30,color:'blue' }
}
);
module.exports = HomeViewController;
7、添加允许使用http访问
App Transport Security Settings -> Allow Arbitrary Loads设置为YES
8、添加编译条件
Build Settings -> Linking -> Other Linker Flags
添加编译条件-lc++，否则报错如下：
Undefined symbols for architecture x86_64:
"std::terminate()", referenced from:
___clang_call_terminate in libReact.a(RCTJSCExecutor.o)
"___cxa_begin_catch", referenced from:
___clang_call_terminate in libReact.a(RCTJSCExecutor.o)
"___gxx_personality_v0", referenced from:
-[RCTJavaScriptContext initWithJSContext:onThread:] in libReact.a(RCTJSCExecutor.o)
-[RCTJavaScriptContext init] in libReact.a(RCTJSCExecutor.o)
-[RCTJavaScriptContext invalidate] in libReact.a(RCTJSCExecutor.o)
_RCTNSErrorFromJSError in libReact.a(RCTJSCExecutor.o)
+[RCTJSCExecutor runRunLoopThread] in libReact.a(RCTJSCExecutor.o)
-[RCTJSCExecutor init] in libReact.a(RCTJSCExecutor.o)
-[RCTJSCExecutor context] in libReact.a(RCTJSCExecutor.o)
...
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
9、Native module cannot be null
查看在Podfile中是否存在'RCTNetwork'，如果没有添加即可解决问题
(http://stackoverflow.com/questions/38629608/native-module-cannot-be-null)
