[ES6-iOSCode]CocoPods的Native管理及集成RN最新版本

很多使用CocoPods的朋友通常认为是从网上下载资源到工程管理,但是不知道可以管理本地资源

一.了解CocoPods本地资源管理

了解清楚了就方便快速集成RN到现有项目

platform :ios, ‘7.0’ 
target "RN-React-Native" do
pod 'React', :path => ‘./iOSJs/node_modules/react-native', :subspecs => [
    'RCTText',
    'RCTImage',
    'RCTWebSocket',
    'RCTPushNotification',
    'RCTActionSheet',
    'ART',
    'RCTCameraRoll'
]
end

platform:支持版本
target "RN-React-Native" do:RN-React-Native是iOS项目名
pod 'React':pod目录
path:需要引导到pod管理的资源目录
subspecs => [] :括号里填写需要导入的资源名称,必须本地已经存在的

二.集成最新RN到现有iOS项目里

1.生成新的RN工程(生成的工程RN版本导入到项目才能一样)

react-native init iostaoge

2.把下图标红部分复制到现有iOS工程里,新建一个单独文件夹管理

[email protected]

3.在现有iOS工程根目录新建Podfile文件,文件里写入以下代码

path根据自己的工程目录修改

platform :ios, ‘7.0’ 
target "RN-React-Native" do
pod 'React', :path => ‘./iOSJs/node_modules/react-native', :subspecs => [
    'RCTText',
    'RCTImage',
    'RCTWebSocket',
    'RCTPushNotification',
    'RCTActionSheet',
    'ART',
    'RCTCameraRoll'
]
end

展示我的目录便于初学者理解

[email protected]

4.pod的配置文件准备后cd到iOS项目工程的根目录里执行命令

pod install

5.然后打开我生成好的项目启动文件与原有iOS项目工程同名

[email protected]

6.在原有iOS工程里新建一个派生类ReactView,为更好的理解RN+iOS混合开发,然后在init ...frame方法里写入以下代码

导入头文件:#import "RCTRootView.h"

-(instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
                NSURL *jsLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
                RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsLocation moduleName:@"iostaoge03" initialProperties:nil launchOptions:nil];
                self.rootView = rootView;
                [self addSubview:rootView];
    }
    return self;
    
}

ViewController.m的viewDidLoad里添加视图

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    ReactView *rootView = [[ReactView alloc]initWithFrame:CGRectMake(110, 110, 220, 220)];
    
    [self.view addSubview:rootView];
}

7.启动RN服务 npm 终端命令:cd 到下图标注的目录执行命令

npm start

[email protected]

8.完成
效果图:

[email protected]

Demo下载: http://pan.baidu.com/s/1slszvT7 密码: bu6w