ReactNative手動嵌入現有iOS專案(第N篇)
開發前必須要的有(1和2)
1.Mac作業系統
2.成功執行過ReactNative專案的
3.建立名為ReactNativeIOS的iOS專案工程
4.在工程對應目錄下建立資料夾RNLibrary(名字可以隨意,用來存放ReactNative的元件),如下圖把對應的檔案複製進去
5.開啟檔案修改index.ios.js檔案(對應的類名字要修改成iOS專案名稱)
import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, View, } from 'react-native'; export default class ReactNativeIOS extends Component { render() { return ( <View style={styles.container}> <Text>This is a simple application.</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, flexWrap: 'wrap', flexDirection: 'row', alignItems:'center', flexDirection: 'column', justifyContent: 'center', }, }); AppRegistry.registerComponent('ReactNativeIOS', () => ReactNativeIOS);
6.packge.json修改檔案裡面的name:''ReactNativeIOS,其他都不變,如果你的版本和其他資訊都沒修改
{
"name": "ReactNativeIOS",
"version": "0.0.1",
"private": true,
"dependencies": {
"react": "15.3.2",
"react-native": "0.37.0"
}
}
7.開啟ReactNativeIOS專案,右鍵New Group----我取了專案名稱ReactNativeIOS(名字可隨意)
8.然後點選ReactNativeIOS資料夾,右鍵Add Files to ReactNativeIOS...(例如我要增加RCTActionSheet.xcodeproj)
其中一個目錄不一樣`.........react-native/React/React.xcodeproj`
其他目錄都是一樣..............react-native/Libraries/ActionSheet./RCTActionSheet.xcodepro`
9.然後在增加需要用到常用的例如下圖(根據自己需要增加不同)
10.新增相關frameworks檔案 接下來要將相關的frameworks檔案新增到工程中, ReactnativeIOS -> TARGETS -> ReactnativeIOS -> Build Phases -> Link Binary Width Libraries
11.JavaScriptCore.framework。libstdc++.tbd也需要加入
12.新增搜尋標頭檔案的地址 ReactnativeIOS -> TARGETS -> ReactnativeIOS -> Build Settings -> Header Search Paths ,新增一條 $(SRCROOT)/RNLibrary/node_modules/react-native/React ,選擇 recursive 。
,
13.在Build Settings下輸入Other Linker Flags 增加-ObjC
14.iOS9以上Http無法直接訪問,所以要在info.plist下開啟功能http
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
15.建立一個UIView,名字隨意如下圖
#import "ReactView.h"
#import <RCTRootView.h>
#import "RCTBundleURLProvider.h"
@implementation ReactView
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
NSURL *jsCodeLocation;
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
// jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"ReactNativeIOS"
initialProperties:nil
launchOptions:nil];
[self addSubview:rootView];
rootView.frame = self.bounds;
}
return self;
}
@end
16.在控制器執行程式碼
#import "RNViewController.h"
#import "ReactView.h"
@interface RNViewController ()
@end
@implementation RNViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
ReactView * reactView = [[ReactView alloc] initWithFrame:CGRectMake(0, 40, CGRectGetWidth(self.view.bounds), 100)];
[self.view addSubview:reactView];
}
@end