配置開(kāi)發(fā)環(huán)境

參照官網(wǎng) 搭建RN環(huán)境

集成進(jìn)現(xiàn)有iOS項(xiàng)目

1.設(shè)置項(xiàng)目結(jié)構(gòu)

首先創(chuàng)建一個(gè)空文件夾作為項(xiàng)目根目錄，
然后在其中創(chuàng)建iOS文件夾，把原工程夾里面的內(nèi)容拷貝到iOS文件夾

2.安裝JavaScript依賴包

在項(xiàng)目根目錄下創(chuàng)建名為package.json的空文件，然后填入以下內(nèi)容：

{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "16.0.0",
    "react-native": "0.51.0-rc.3"
  }
}

打開(kāi)終端，進(jìn)入到項(xiàng)目的根目錄中（即包含有package.json文件的目錄），在終端鍵入如下命令來(lái)安裝React和React Native模塊：

$ npm install

3.配置CocoaPods

安裝CocoaPods教程請(qǐng)自行百度
使用終端進(jìn)入iOS目錄執(zhí)行以下命令，創(chuàng)建Podfile文件：

$ pod init

按照如下內(nèi)容編輯Podfile：

source 'https://github.com/CocoaPods/Specs.git'

# Swift應(yīng)用必須的添加以下兩行
platform :ios, '8.0'
use_frameworks!

# target的名字一般與你的項(xiàng)目名字相同
target 'YourProjectName' do

  # 'node_modules'目錄一般位于根目錄中
  # 但是如果你的結(jié)構(gòu)不同，那你就要根據(jù)實(shí)際路徑修改下面的`:path`
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # 如果RN版本 >= 0.45則加入此行
    'DevSupport', # 如果RN版本 >= 0.43，則需要加入此行才能開(kāi)啟開(kāi)發(fā)者菜單
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 這個(gè)模塊是用于調(diào)試功能的
    # 在這里繼續(xù)添加你所需要的RN模塊
  ]
  # 如果你的RN版本 >= 0.42.0，請(qǐng)加入下面這行
  pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

   # 如果RN版本 >= 0.45則加入下面三個(gè)第三方編譯依賴
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'GLog', :podspec => '../node_modules/react-native/third-party-podspecs/GLog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

end

接下來(lái)執(zhí)行：

$ pod install

等待安裝結(jié)束

注：如果你看到類似"The swift-2048 [Debug] target overrides the FRAMEWORK_SEARCH_PATHS build setting defined in Pods/Target Support Files/Pods-swift-2048/Pods-swift-2048.debug.xcconfig. This can lead to problems with the CocoaPods installation"的警告，請(qǐng)查看Xcode的Build Settings中的Framework Search Paths選項(xiàng)，確保其中的Debug和Release都只包含$(inherited)。

安裝成功后，通過(guò)工程里面的workspace打開(kāi)工程，編譯，此時(shí)可能會(huì)報(bào)錯(cuò)，提示找不到fishkook.h文件，此時(shí)只需將報(bào)錯(cuò)部分，也就是 #import <fishhook/fishhook> 改為 #import <React/fishhook> ，再次編譯即可編譯成功

4.簡(jiǎn)單Demo

在項(xiàng)目的根目錄創(chuàng)建名為index.js文件，鍵入如下代碼：

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

class RNHighScores extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.highScoresTitle}>
          Hello World!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
});

AppRegistry.registerComponent('MyReactNativeApp', () => RNHighScores);

接下來(lái)，在iOS工程中新建一個(gè)ViewController作為根控制器（這里命名為CustomRootVC），取消從storyboard中加載視圖，在info.plist中添加白名單，以便允許程序訪問(wèn)http鏈接：

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

接著，在Appdelegate中鍵入如下代碼：

import UIKit
import React

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        
        window = UIWindow(frame: UIScreen.main.bounds)
        
        let jsCodeLocation = URL(string: "http://localhost:8081/index.bundle?platform=ios")
        let rootView = RCTRootView(
            bundleURL: jsCodeLocation,
            moduleName: "MyReactNativeApp",
            initialProperties: nil,
            launchOptions: nil
        )
        let rootVC = CustomRootVC()
        rootVC.view = rootView
        
        window?.rootViewController = rootVC
        window?.makeKeyAndVisible()
        
        return true
    }
}

到此為止，一個(gè)簡(jiǎn)單的ReactNativeDemo就寫(xiě)好了，但是想要運(yùn)行起來(lái)還需要做一件事，就是開(kāi)啟本地server。打開(kāi)終端，進(jìn)入到node_modules文件夾所在目錄，也就是項(xiàng)目的根目錄，執(zhí)行如下命令：

$ npm start

出現(xiàn)如下圖所示，則說(shuō)明服務(wù)啟動(dòng)成功：

接下來(lái)，回到xcode，運(yùn)行項(xiàng)目

運(yùn)行時(shí)界面

運(yùn)行成功界面

聲明：以上內(nèi)容部分摘自ReactNative中文網(wǎng)，轉(zhuǎn)載請(qǐng)注明出處！