ios原生集成RN

搭建开发环境：https://reactnative.cn/docs/getting-started.html
1、创建ios项目
2、在目录文件下 创建index.ios.js和package.json文件
index.ios.js中写

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class Main extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          Hello World
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('xxx', () => Main); //xxx项目名称  Main是所要显示的组件名称

在package.json中写

{
  "name": "xxx",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "16.0.0-alpha.6",     //注意版本
    "react-native": "0.51"          //注意版本
  }
}

3、打开终端在package.json目录文件下执行npm install;成功后出现node_modules文件夹
4、配置podfile文件

pod 'React', :path => './node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # 如果RN版本 >= 0.45则加入此行
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
  ]

pod "yoga", :path => "./node_modules/react-native/ReactCommon/yoga"  //注意此处文件地址可根据实际情况变化

在终端执行pod install
5、创建RNViewController，在viewDidLoad中写

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    NSString *url = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
    NSURL *jsCodeLocation = [NSURL URLWithString:url];
    RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"wutongzc" initialProperties:nil launchOptions:nil];
    self.view = rootView;
}

6、启动服务器 npm start
7、新建viewController集成RNViewController，编译运行
我出现了 undefined is not an object(evaluating ‘ReactInternals.ReactCurrentOwner’)这个错误
https://blog.csdn.net/yeputi1015/article/details/80698072 在这个里面找到了解决办法 原因：当低版本升级到高版本时，经常会遇到，应该package.json中版本问题
解决办法：执行以下命令解决~npm i react@16.0.0-alpha.12 --save
8、

效果图.png