很多使用CocoPods的朋友通常認(rèn)為是從網(wǎng)上下載資源到工程管理,但是不知道可以管理本地資源
一.了解CocoPods本地資源管理
了解清楚了就方便快速集成RN到現(xiàn)有項目
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:需要引導(dǎo)到pod管理的資源目錄
subspecs => [] :括號里填寫需要導(dǎo)入的資源名稱,必須本地已經(jīng)存在的
二.集成最新RN到現(xiàn)有iOS項目里
1.生成新的RN工程(生成的工程RN版本導(dǎo)入到項目才能一樣)
react-native init iostaoge
2.把下圖標(biāo)紅部分復(fù)制到現(xiàn)有iOS工程里,新建一個單獨文件夾管理
QQ20160720-2@2x.png
3.在現(xiàn)有iOS工程根目錄新建Podfile文件,文件里寫入以下代碼
path根據(jù)自己的工程目錄修改
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
展示我的目錄便于初學(xué)者理解
QQ20160720-3@2x.png
4.pod的配置文件準(zhǔn)備后cd到iOS項目工程的根目錄里執(zhí)行命令
pod install
5.然后打開我生成好的項目啟動文件與原有iOS項目工程同名
QQ20160720-4@2x.png
6.在原有iOS工程里新建一個派生類ReactView,為更好的理解RN+iOS混合開發(fā),然后在init ...frame方法里寫入以下代碼
導(dǎo)入頭文件:#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服務(wù) npm 終端命令:cd 到下圖標(biāo)注的目錄執(zhí)行命令
npm start
QQ20160720-5@2x.png
8.完成
效果圖:
QQ20160720-1@2x.png
Demo下載: http://pan.baidu.com/s/1slszvT7 密碼: bu6w
