ReactNative 集成到 iOS原生应用 Cocoapods管理

long time no see，最近在折腾RN。找了一些书，看了结果各种错误各种坑。于是我还是依然决然的到React Native官网和ReactNative中文网 去寻求答案，实在不行直接github issues得了。

---

一、pod install （RN） 导致第三方报错。

WTF啥情况，先查看了cocoapods，无意间发现了Ruby的taobao镜像停止更新，机智的我换成了rubychina源。

$ gem sources --add https://gems.ruby-china.org/ --remove https://rube.taobao.org/

这边假设都了解更新过后podfile的写法。

platform :ios, '7.0'
target 'cocoapodsMangeRN' do
pod 'React', :path => './node_modules/react-native', :subspecs => [
  'Core',
  'RCTImage',
  'RCTNetwork',
  'RCTText',
  'RCTWebSocket',
  # Add any other subspecs you want to use in your project
]
end

然后发现换成rubychina之后，pod install就好了。

RN安装成功

如果想折腾cocopods，降级以适应第三方库请点击这里。

二、明知书上的Demo会出错，还是毅然决然地入坑。

讲在前面：RN Version（0.37.0），React Version (15.3.1)

• 看一下工程目录：

  

  文件目录图.png

• **NPM **和 Node Project Modules的区别和相关知识，这边不介绍有兴趣的可以去调研一下。

根据上面的目录结构，大家应该也注意到了两个文件index.ios.js和package.json两个文件

• 注意两文件的位置是在Xcode工程的根目录下。
• 这边我使用的文本编辑工具是Atom.
• index.ios.js 前端代码在iOS中的实现写在其中。

Normally with React Native projects, you will put files like package.json, index.ios.js, etc. in the root directory of your project and then have your iOS specific native code in a subdirectory like ios/where your Xcode project is located (e.g., .xcodeproj
).

• package.json:一些必要的依赖包记录在其中，啥样呢？

   {
   "name": "jjreact-native",
   "version": "1.0.0",
   "description": "ToDosthTest",
   "main": "index.js",
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start"
   },
   "author": "jeversonjee",
   "license": "ISC",
   "dependencies": {

     "react": "15.3.1",
     "react-native": "^0.37.0"
   }
 }

• S1:写好package.json就用npm来安装React和React Native模块npm install
• S2:就是上述的cocoapods的 pod install 了。
• S3:在index.ios.js来一个简单的代码了。

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

class cocoapodsMangeRN extends React.Component {
  render() {
    return (
      
        
          This is jeversonjee test
        
    
    );
  }
}
const styles = StyleSheet.create({
container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#FFFFFF',
},

});

AppRegistry.registerComponent('cocoapodsMangeRN', () => cocoapodsMangeRN);

三、说了这么久是时候Xcode表演真正的技术了。

是时候引入RCTRootView了,可以像这辆理解

• 1.ReactNative应用的生存空间。
• 2.RCTRootView对象加载RN（实际是index.ios.js 的js代码完成）的内容渲染出来。

这里偷了个懒用了书上的例子。

• 自定义一个JJReactView：UIView的视图
• 在awakeFromNib将通过将RN渲染的内容添加到视图中

//
//  JJReactView.m
//  cocoapodsMangeRN
//
//  Created by JeversonJee on 2016/11/18.
//  Copyright © 2016年 JerversonJee. All rights reserved.
//

#import "JJReactView.h"
#import 

@implementation JJReactView

- (void)awakeFromNib {
  
    //
    NSString *urlStr = @"http://localhost:8081/index.ios.bundle?platform=ios";
    NSURL *jsCodeLocation = [NSURL URLWithString:urlStr];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation     moduleName:@"cocoapodsMangeRN" initialProperties:nil launchOptions:nil];
    [self addSubview:rootView];
    rootView.frame = self.bounds;
    [super awakeFromNib];
}
  
@end

• S5:打开终端cd：工程根目录 & npm start

终端显示结果.png

• S6:然后再模拟器上运行你的代码吧。

四、你以为我写demo就这么按部就班，然而是这样的。

错误3.png

• 可以尝试将package中的一些配置改改，整点事看看能报啥错。

其实买的这本书，在评论中久看到了书友说不好，写上去一大堆代码。为什么还要呢，对比之前的版本的写法，理解上应该会更好，可能我有些奇葩罢了。

1. 其实代码简单，还是给个传送门吧点击这里

---

我是有底线的，继续爬坑吧。