iOS原生app集成RN

现在集成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)