RN集成到現有應用

1. 配置項目目錄結構 首先建立一個空目錄用於存放 React Native 項目，而後在其中建立一個/ios子目錄，把你現有的 iOS 項目拷貝到/ios子目錄中。 2.在項目根目錄下建立一個名爲package.json的空文本文件，而後填入如下內容：

{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  }
}
複製代碼

接下來咱們使用 yarn 或 npm（二者都是 node 的包管理器）來安裝 React 和 React Native 模塊。請打開一個終端/命令提示行，進入到項目目錄中（即包含有 package.json 文件的目錄），而後運行下列命令來安裝： yarn add react-native 這樣默認會安裝最新版本的 React Native，同時會打印出相似下面的警告信息（你可能須要滾動屏幕才能注意到）： warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0". 這是正常現象，意味着咱們還須要安裝指定版本的 React： $ yarn add react@16.2.0 注意必須嚴格匹配警告信息中所列出的版本，高了或者低了都不能夠。

接下來須要在podfile裏添加依賴庫

# target的名字通常與你的項目名字相同
target 'NumberTileGame' do

  # 'node_modules'目錄通常位於根目錄中
  # 可是若是你的結構不一樣，那你就要根據實際路徑修改下面的`:path`
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # 若是RN版本 >= 0.47則加入此行
    'DevSupport', # 若是RN版本 >= 0.43，則須要加入此行才能開啓開發者菜單
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 調試功能須要此模塊
    'RCTAnimation', # FlatList和原生動畫功能須要此模塊
    # 在這裏繼續添加你所須要的其餘RN模塊
  ]
  # 若是你的RN版本 >= 0.42.0，則加入下面這行
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  # 若是RN版本 >= 0.45則加入下面三個第三方編譯依賴
  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
複製代碼

###代碼集成

1. 建立一個index.js文件 首先在項目根目錄下建立一個空的index.js文件。
2. 添加你本身的 React Native 代碼

在index.js中添加你本身的組件。這裏咱們只是簡單的添加一個 組件，而後用一個帶有樣式的 組件把它包起來。

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是總體 js 模塊（即你全部的 js 代碼）的名稱。你在 iOS 原生代碼中添加 React Native 視圖時會用到這個名稱。

掌握核心科技： RCTRootView 如今咱們已經在index.js中建立了 React Native 組件，下一步就是把這個組件添加給一個新的或已有的ViewController。 首先導入RCTRootView的頭文件。 #import <React/RCTRootView.h> 這裏的initialProperties注入了一些演示用的數據。在 React Native 的根組件中，咱們可使用this.props來獲取到這些數據。

NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.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];
複製代碼

3. 添加 App Transport Security 例外

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>
複製代碼

4.運行 Packager 要運行應用，首先須要啓動開發服務器（即 Packager，它負責實時監測 js 文件的變更並實時打包，輸出給客戶端運行）。具體只需簡單進入到項目根目錄中，而後運行： npm start 5.運行應用 若是你使用的是 Xcode，那麼照常編譯和運行應用便可。若是你沒有使用 Xcode（可是你仍然必須安裝 Xcode），則能夠在命令行中使用如下命令來運行應用： react-native run-ios