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

叮咚。。。。奇迹出现了！！！