版本0.39

1. 新建一個(gè)xcode，放在ios/的子目錄下

2. 根目錄下新建package.json

{
  "name": "swift-2048",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.4.1",
    "react-native": "0.39.2"
  }
}

3. 安裝依賴包

$ npm install

4. ios 目錄下新增podfile

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

# 對(duì)于Swift應(yīng)用來(lái)說(shuō)下面兩句是必須的
platform :ios, '8.0'
use_frameworks!

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

  # 'node_modules'目錄一般位于根目錄中
  # 但是如果你的結(jié)構(gòu)不同，那你就要根據(jù)實(shí)際路徑修改下面的`:path`
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 這個(gè)模塊是用于調(diào)試功能的
    # 在這里繼續(xù)添加你所需要的模塊
  ]
end

5. 安裝pod

$ pod install

6. 創(chuàng)建一個(gè) index.ios.js 文件

'use strict';

import React,{Component} 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);

7. 在xcode project storyboard 上新建一個(gè)按鈕，關(guān)聯(lián)action， 需要先 import React

@IBAction func highScoreButtonTapped(sender : UIButton) {
  NSLog("Hello")
  let jsCodeLocation = URL(string: "http://localhost:8081/index.ios.bundle?platform=ios")
  let mockData:NSDictionary = ["scores":
      [
          ["name":"Alex", "value":"42"],
          ["name":"Joel", "value":"10"]
      ]
  ]

  let rootView = RCTRootView(
      bundleURL: jsCodeLocation,
      moduleName: "RNHighScores",
      initialProperties: mockData as [NSObject : AnyObject],
      launchOptions: nil
  )
  let vc = UIViewController()
  vc.view = rootView
  self.present(vc, animated: true, completion: nil)
}

8. 修改Info.plist, 在<dict></dict>里增加

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

9. 運(yùn)行Packager

$ npm start

10. xcode 里運(yùn)行應(yīng)用

11. 解決報(bào)錯(cuò) 'CSSLayout/CSSLayout.h' file not found

1. 將報(bào)錯(cuò)的#import <CSSLayout/CSSLayout.h>全部改成#import “CSSLayout.h"，一共是四處。

2. 有兩個(gè)CSSLayout.h文件，將CSSLayout文件夾整體刪掉。

參考

1. https://reactnative.cn/docs/0.42/integration-with-existing-apps.html#content

2. http://www.itdecent.cn/p/0c347d6b5fc6