如果你正准备从头开始制作一个新的应用，那么 React Native 会是个非常好的选择。但如果你只想给现有的原生应用中添加一两个视图或是业务流程，React Native 也同样不在话下。只需简单几步，你就可以给原有应用加上新的基于 React Native 的特性、画面和视图等。

具体的步骤根据你所开发的目标平台不同而不同。

1、配置项目目录结构

创建一个空文件夹命名为你RN项目名称，在里面再新建一个文件夹/ios，把你现有的swift/OC项目全部拷贝到/ios文件夹内。

2、安装 JavaScript 依赖包

cd 到iOS工程根目录，执行以下命令，然后编辑package.json，最后保存

vim package.json

    {
      "name": "SwiftRNProject",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "start": "yarn react-native start"
      }
    }

此处的”name”: “NumberTileGame”,NumberTileGame替换成自己的iOS工程名

3.安装node_modules/

cd到根目录，执行以下命令

npm install

此步会根据上面的package.json文件安装node_modules

4.创建Podfile文件

cd到iOS工程的根目录（ios/）

vim podfile

命令执行完后会在（ios/）目录下创建Podfile文件，所需要的react-native依赖库在这里配置，初始内容如下：

# Uncomment the next line to define a global platform for your project
platform :ios, '9.0'
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
# use_frameworks!

target 'RNTest' do

# Pods for RNTest
#***********************************************************************#

# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTImage',
'RCTActionSheet',
'RCTGeolocation',
'RCTNetwork',
'RCTSettings',
'RCTVibration',
'BatchedBridge',
'RCTWebSocket',
'ART',
'RCTAnimation',
'RCTBlob',
'RCTCameraRoll',
'RCTPushNotification',
'RCTLinkingIOS',
'DevSupport'
# 在这里继续添加你所需要的模块
]

# 如果你的RN版本 >= 0.42.0，请加入下面这行
pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

#***********************************************************************#

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

end

pod install 安装

5.创建index.ios.js （创建RN组件）

cd到根目录，执行以下命令

touch index.ios.js

编写index.ios.js 如下

    'use strict';
    
    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,
      },
    });
    
    // Module name
    AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

此处最后一行代码中的RNHighScores是自定义的rn组件的名字，iOS原声代码调用时需要用到

6. 编写iOS代码调用rn

ViewController.m

    #import "ViewController.h"
    #import "RCTRootView.h"
    
    @interface ViewController ()
    
    @end
    
    @implementation ViewController
    
    ![2.png](http://upload-images.jianshu.io/upload_images/3170699-5debf45bf79aedcb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
    }
    
    - (IBAction)highScoreButtonPressed:(id)sender {
        NSLog(@"High Score Button Pressed");
        NSURL *jsCodeLocation = [NSURL
                                 URLWithString:@"http://localhost:8081/index.ios.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];
    }

@end

7.运行项目

要运行应用，首先需要启动开发服务器（即 Packager，它负责实时监测 js 文件的变动并实时打包，输出给客户端运行）。具体只需简单进入到项目根目录中，cd node_modules 所在目录 然后运行：

$ npm start