RN-集成到現有的原生應用

主要是安裝JAVAScript的安裝包

創建package.json的目錄需要注意下，IOS開發，一般會在.project的上一級目錄，package.json：

    {
  "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-alpha.6",
    "react-native": "0.44.3" //該地方建議使用react-native的最新版本，使用npm info react和npm info react-native來查看當前的最新版本
  }
}

    $ npm install  //若npm沒有安裝，自行度娘安裝。

安裝依賴庫，一般IOS開發的cocoapods是必須安裝的，這裏就不做說明了。

• 注意Podfile和我們平常安裝一樣要在Project目錄下
• 在Podflie文件必須要增加platform控制，一般在IOS 8.0 以上

Podfile的具體內容：

    # Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'TestReactNative' do
      # 'node_modules'目錄一般位於根目錄中
     # 但是如果你的結構不同，那你就要根據實際路徑修改下面的`:path`
     pod 'React', :path => '../node_modules/react-native', :subspecs => [
        'Core',
        'DevSupport', # 如果RN版本 >= 0.43，則需要加入此行才能開啓開發者菜單
        'RCTText',
        'RCTNetwork',
        'RCTWebSocket', # 這個模塊是用於調試功能的
        'BatchedBridge' # 注意ReactNative中文網站沒有使用該庫，會導致Xcode運行時報錯。調試時提示該庫已經被棄用了，但還沒找到對應的庫
        # 在這裏繼續添加你所需要的RN模塊
     ]
     # 如果你的RN版本 >= 0.42.0，則加入下面這行
    pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

end

安裝Podfile：$ pod install

關鍵的步驟來了（React Native組建）：

創建 JS文件，在與剛纔創建的package.json文件的同級目錄下創建index.js文件（舊版本是創建index.ios.js 和 index.Android.js文件，這點要注意一下）
最初的內容index和APP的代碼是寫在一塊的，內容如下：

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,
  },
});

// 前面最好爲項目的名稱，後面爲你的項目名稱
AppRegistry.registerComponent('MyReactNativeApp', () => RNHighScores);

掌握核心科技–RCTRootView

現在我們需要使用RCTRootView類來家在我們的ReactNative模塊，其實在我們上面做那麼多的工作的時候，工程會給我們生成一個.bundle文件，我們只需要加載該bundle文件即可，這就和IOS的資源文件加載機制相吻合了，最後JS文件以bundle的形式加載。
代碼如下：

- (IBAction)highScoreButtonPressed:(id)sender {
    NSLog(@"High Score Button Pressed");
    NSURL *jsCodeLocation = [NSURL
                             URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
    RCTRootView *rootView =
      [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                           moduleName        : @"MyReactNativeApp"
                           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];
}

現在萬事俱備，只欠東風了，但是目前我們的JS文件並沒有打包到工程中，那麼我們需要給把JS文件放到服務器上去，這些ReactNative都幫我們處理好了，當我們後續需要打包的時候，會處理成Bundle的形式內嵌到工程裏面去，那麼現在我們需要藉助ReactNative來把服務器運行起來：

react-native start

現在就真的萬事俱備了，若有Xcode的話直接運行Xcode就可以了，若沒有Xcode的話，那可以直接使用ReactNative的命令：

        $ react-native run-ios

叮咚。。。。奇蹟出現了！！！