【react-native-0.31-iOS】iOS集成react-native（01）_native module cannot be null-优快云博客

本文链接：https://blog.youkuaiyun.com/liuhaiyanga/article/details/52221389

1.首先创建一个iOS项目。

2.安装CocoaPods。

3.安装Node.js，并升级到最新版本。

4.通过CocoaPods安装react-native。将以下内容写入Podfile（注意写入路径）

target 'iOSSayHello' do
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTWebSocket',
]
end

$pod install

6.创建index.ios.js文件，

$ mkdir ReactComponent
$ touch ReactComponent/index.ios.js

并粘贴一段代码进行初始化

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

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red'
  }
});

class SimpleApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>This is a simple application.</Text>
      </View>
    )
  }
}

AppRegistry.registerComponent('你的APP名字', () => SimpleApp);

7.创建package.json文件。

{
  "name": "iOSSayHello",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "^15.2.1",
    "react-native": "^0.31.0"
  }

}

8.创建ReactView类（ISO工程中），并在ReactView中初始化RCTRootView，如下

- (instancetype)init
{
   self =  [super init];
    if (self) {
        NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];

        RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                            moduleName:@"iOSSayHello"
                                                     initialProperties:nil
                                                         launchOptions:nil];
        [self addSubview:rootView];
        rootView.frame = self.bounds;

    }
    return self;
}

9.启动开发服务器

(JS_DIR=`pwd`/ReactComponent; cd node_modules/react-native; npm run start -- --root $JS_DIR)

10.在iOS 9以上的系统中，除非明确指明，否则应用无法通过http协议连接到localhost主机，建议你在Info.plist文件中将localhost列为

App Transport Security的例外。
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>