【react-native-0.31-iOS】iOS集成react-native（01）

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

5.

$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>

11.运行项目

12.报错解决方案

(a)

native module cannot be null

http://stackoverflow.com/questions/37999468/entry-file-error-in-react-native-from-packager/38044411

13.更新node.js地址 http://blog.csdn.net/sruru/article/details/46301405

14.关于n http://it.taocms.org/03/3079.htm