很多使用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工程里,新建一个单独文件夹管理
QQ20160720-2@2x.png
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
展示我的目录便于初学者理解
QQ20160720-3@2x.png
4.pod的配置文件准备后cd到iOS项目工程的根目录里执行命令
pod install
5.然后打开我生成好的项目启动文件与原有iOS项目工程同名
QQ20160720-4@2x.png
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
QQ20160720-5@2x.png
8.完成
效果图:
QQ20160720-1@2x.png
Demo下载: http://pan.baidu.com/s/1slszvT7 密码: bu6w
