使用Cocoapods集成react native

对于react native（一下简称RCT）很多人应该都听说过，但真的集成使用，还是没有过的，近期在为已有项目集成RCT遇上了很多坑，发现网上挺多资料，但是看着乱的很，于是自己整理了一下：

在集成之前，你的电脑必须安装：

• react native
• cocoapods

step 1.在项目中加入Cocoapods

Cocoapods是iOS中目前公认的最便捷，合理的第三方框架管理工具，具体的网上很多相关的文章，一搜就可以了。

项目工程根目录下
pod init
pod install

step 2.安装react-native

先创建一个文件夹用来存放react-native

mkdir react

进入创建的react文件中

cd react 

创建package.json
文件 记得删除注释

{
  "name": "你的项目名",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {  // 这里填入依赖项
    "react": "16.0.0",  // 其实 react也是作为一个第三方库存在的
    "react-native": "0.50"  // 这个也是 - - 依次可以加入很多第三方库，然后使用npm install初始化，其实这里和cocoapods很相似
  }
}

在react文件夹中安装react-native

npm install

创建index.ios.js文件

 /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class ModuleA extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </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('ModuleA', () => ModuleA);

step 3.使用Cocoapods集成react-native

在Podfile中添加React

pod 'React', :path => './react/node_modules/react-native', :subspecs => [
  'Core',
  'DevSupport',
  'RCTText',
  'RCTNetwork',
  'RCTWebSocket',
  'BatchedBridge',
  ]
  pod 'yoga', :path => './react/node_modules/react-native/ReactCommon/yoga'
# 根据需求添加项目中需要的模块

注意：./react/node_modules/react-native这个react是和你开始创建的存放RCT的目录是相同的。记得要添加所有你需要的依赖！举例来说， 元素如果不添加RCTText依赖就不能运行。
更新pod

pod update --no-repo-update

到这里，配置工作就基本完成了，接下来跑起来试一下

step 4.run run run

先进入开始安装RCT的目录中，开启服务

react-native start

在iOS 9以上的系统中，除非明确指明，否则应用无法通过http协议连接到localhost主机。 我们建议你在Info.plist文件中将localhost列为App Transport Security的例外。 如果不这样做，在尝试通过http连接到服务器时，会遭遇这个错误 - Could not connect to development server.
打开工程中的 Info.list 文件，添加下面配置即可：

<key>NSAppTransportSecurity</key> 
<dict> 
  <key>NSExceptionDomains</key> 
  <dict> 
    <key>localhost</key> 
    <dict>   
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> 
      <true/> 
    </dict> 
  </dict>
</dict> 

做完配置，就可以开始写代码了

NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl]; 
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"ModuleA" initialProperties:nil launchOptions:nil]; 
[self.view addSubview:rootView];rootView.frame = CGRectMake(0, 20, 300, 300);