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