在原生工程中引入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 (
      <View style={styles.container}>
        <Text>This is ReactNative Demo .</Text>
      </View>
    )
  }
}

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的方式，具体配置方式可以网上自行搜索添加。

我的工程demo