集成React Native到现有iOS项目

React Native开发移动客户端App的方式，现在是非常火爆，为什么这么说呢，有人吹，有人黑，人气自然就高咯。为什么有人吹呢？用JavaScript(同时也可以使用Node.js丰富的第三方库)这种世界上使用人最多的语言来开发，学会了这种开发模式，基本就可以同时开发iOS和Android两端的App了，而且可以将js代码部署云端，做到热更新。如果你想做技术热浪中的弄潮儿，不妨也把你现有的iOS项目中集成React Native。

CocoaPods来进行React Native的管理

现在大部分的iOS项目都是通过CocoaPods来进行第三方库依赖的管理，而且使用这种方式集成React Native相对方便一点。

步骤1

创建一个RN的文件夹来放置js代码

Paste_Image.png

步骤2

RN文件下创建package.json文件(npm就是通过这个文件来进行第三库依赖的管理)

{
  "name": "ReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.3.1",
    "react-native": "0.33.0"
  }
}

步骤3

在package.json所在的文件路径执行

npm install

步骤4

创建index.ios.js(即React Native的入口文件)

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class ReactNativeApp extends Component {
  render() {
    return (
      
        
          Welcome to React Native!
        
        
          To get started, edit index.ios.js
        
        
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('ReactNativeApp', () => ReactNativeApp);

检查点

这几个步骤走下来，项目的结构如下

Paste_Image.png

步骤5

使用CocoaPods来将React Native的项目和iOS项目关联起来，其中path是你创建刚刚创建的RN文件夹中的node_modules里的react-native，并且subspecs中指定的库，如果在iOS有用到其他的库还需要在这里指定一下

# Uncomment this line to define a global platform for your project
platform :ios, '9.0'
# Uncomment this line if you're using Swift
# use_frameworks!

pod 'React', :path => './ReactComponent/node_modules/react-native', :subspecs => [
 'Core',
  'ART',
  'RCTActionSheet',
  'RCTAdSupport',
  'RCTGeolocation',
  'RCTImage',
  'RCTNetwork',
  'RCTPushNotification',
  'RCTSettings',
  'RCTText',
  RCTWebSocket',
]
target 'XXXApp' do

end

然后执行一下 pod install

步骤6

iOS端的入口代码

#import "ViewController.h"
#import "RCTBundleURLProvider.h"
#import "RCTRootView.h"

@interface ViewController ()

@property(nonatomic, strong) RCTRootView *rootView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
    self.rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"ReactNativeApp"
                                                 initialProperties:nil
                                                     launchOptions:nil];
    self.view =self.rootView;
}

@end

其中新版本中，真机测试时也不需要修改server的ip地址了，只要是同一个网段就可以访问到了

步骤7

如果不能连接到js管理的服务器，请修改info.plist

NSAppTransportSecurity
    
        NSAllowsArbitraryLoads
        
    

步骤7

启动服务器， RN文件夹下执行

npm start

步骤8

xcode cmd+R，理论上就可以看到如下图了

Paste_Image.png

如果在最后一步中，一直有红色的错误提示出现，也请google下，千万不要气馁！其实你里成功只差一个坚持二字。