開發前必須要的有(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