集成React|集成React Native到现有iOS项目集成ReactNative到现有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' doend然后执行一下 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