該篇文章主要分為兩部分

• 1.集成過程
• 2.可能遇到的問題（比較蠢的問題）

一：集成過程

1.1首先要有個開發(fā)環(huán)境吧

具體請移步這篇搭建react native的開發(fā)環(huán)境的文章

1.2開始集成

以下過程來自React native中文網(wǎng)，我只是提煉了一下。畢竟字?jǐn)?shù)很多?？次疫@個方便些。

• step1：創(chuàng)建一個oc項目
• step2：按照RN中文網(wǎng)的建議，根目錄創(chuàng)建一個/ios文件，用來存放iOS的源碼。簡單來說就是把所有創(chuàng)建工程時生成的所有東西都丟到/ios里面去。
• step3：在/ios中pod init，創(chuàng)建一個pod文件，用來下載、管理RN所需要的庫，并且將以下復(fù)制到pod中。具體每一個是做什么用的，可以自行Google。

pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTCameraRoll',
    'RCTGeolocation',
    'RCTNetwork',
    'RCTPushNotification',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTLinkingIOS'
  ]

• step4：pod集成完后直接 pod install坐等加載完畢
• step5：回到項目根目錄，創(chuàng)建兩個文件。分別是package.json和index.ios.js文件。

向package.json文件中復(fù)制以下代碼：
{
  "name": "NumberTileGame",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "npm": "^6.0.1",
    "react": "15.4.1",
    "react-native": "0.39.2"
  }
}

向index.ios.js文件中寫入以下內(nèi)容(RN中文網(wǎng)的例子)
'use strict';

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class RNHighScores extends React.Component {
  render() {
    var contents = this.props["scores"].map(
      score => <Text key={score.name}>{score.name}:{score.value}{"\n"}</Text>
    );
    return (
      <View style={styles.container}>
        <Text style={styles.highScoresTitle}>
          2048 High Scores!
        </Text>
        <Text style={styles.scores}>    
          {contents}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  highScoresTitle: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  scores: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

// 整體js模塊的名稱
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

//注意:這個'RNHighScores'在oc代碼中會被調(diào)用到，要保持oc代碼中調(diào)用和這里的書寫一致。

• step6:在根目錄執(zhí)行npm install，執(zhí)行完后，可能會要求更新，這個隨意都可以。這個過程會將node_modules下載到根目錄中。
• step7：需要配置一下網(wǎng)絡(luò)設(shè)置。打開info.plist，添加以下配置。

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

• step8：我們要修改一下oc的代碼，把RN自帶的view加進(jìn)項目中去。別忘了，導(dǎo)入#import "RCTRootView.h"

因為這里完全按照的是RN中文網(wǎng)去做?？梢詫⒁幌麓a放入ViewController中，放在touchesbegin中就好了。
    [super touchesBegan:touches withEvent:event];
    NSLog(@"High Score Button Pressed");
    NSURL *jsCodeLocation = [NSURL
                             URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                         moduleName        : @"RNHighScores"
                         initialProperties :
     @{
       @"scores" : @[
               @{
                   @"name" : @"Alex",
                   @"value": @"42"
                   },
               @{
                   @"name" : @"Joel",
                   @"value": @"10"
                   }
               ]
       }
                          launchOptions    : nil];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];

• step9：最后一步非常重要，啟動你的服務(wù)。。（我忘記了這一步導(dǎo)致加載不出來，很蠢的問題）。終端進(jìn)入根目錄，npm start。啟動服務(wù)即可。
• last step：運行項目即可。xcode run 或者react-native run-ios

二：遇到的問題

2.1 cocoapods找不到頭文件

solution：user header search paths 添加${SRCROOT}。

2.2 程序啟動就crash，并報錯image not found。

solution：這個問題并不是說圖片找不到，其實是有些庫找不到。只需要移除那些庫就可以了。

2.3 如果出現(xiàn)了tcp connect failed

solution：1.請去啟動服務(wù) 2.配置網(wǎng)絡(luò)環(huán)境。詳見step7

三：the end

具體配置不是很難，按照步驟走就沒問題。
再次重申：本文章只是根據(jù)RN中文網(wǎng)步驟走了一遍，提煉了一下，方便大家看。
因為部門技術(shù)棧的原因，公司選型可能會用Weex，畢竟RN的學(xué)習(xí)成本實在太高，但是RN是一個很好的方向，我會在以后不定期更新學(xué)習(xí)進(jìn)度。