iOS老项目使用pods集成ReactNative

老项目集成ReactNative，目录结构肯定和react-native init 出来的项目结构不同了，用cocoapods管理会方便很多。这篇文章简单介绍一下基本的集成方式，直接从集成开始，前面那些开发环境搭建就不赘述了。

一、文件目录结构

在原工程目录下新建一个文件夹放置ReactNative相关的文件。如果只做iOS端的话，直接和工程一起提交到svn/git就好，要和安卓一起的话ReactNative这个文件夹可以单独提交。然后可以设置一下node_modules不提交。

二、初始化ReactNative文件夹

新建一个package.json文件，package.json可以简单的理解类似于Podfile。接着切换到ReactNative目录下install项目所需要的各种模块，生成node_modules文件夹。

cd  ReactNative
npm install

如果只是测试的话可以复制别的项目的package.json，或者用下面这个。

{
    "name": "test",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "16.0.0-alpha.6",
        "react-native": "0.44.2"
    },
    "devDependencies": {
        "babel-jest": "20.0.3",
        "babel-preset-react-native": "1.9.2",
        "jest": "20.0.4",
        "react-test-renderer": "16.0.0-alpha.6"
    },
    "jest": {
        "preset": "react-native"
    }
}

三、把ReactNative组件集成到工程中

如文章标题，这里我们要使用cocoapods管理ReactNative组件，首先就应该要修改Podfile。ReactNative的开发人员已经把使用cocoapods集成的podspec文件写好了，so，我们直接在podfile文件里添加上指向本地podspec的路径就好了。除了React还需要Yoga，少了这个可能在pod install的时候会报错。例如：

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'

target "YOU PROJECT NAME" do

pod 'Yoga',  :path => './ReactNative/node_modules/react-native/ReactCommon/yoga'
pod 'React', :path => './ReactNative/node_modules/react-native', :subspecs => [
  'Core',
  'ART',
  'RCTActionSheet',
  'RCTGeolocation',
  'RCTImage',
  'RCTNetwork',
  'RCTPushNotification',
  'RCTSettings',
  'RCTText',
  'RCTVibration',
  'RCTWebSocket',
  'RCTLinkingIOS',
  'RCTAnimation',
]
end

然后就是熟悉的pod install了。

pod install
Analyzing dependencies
Fetching podspec for `React` from `./ReactNative/node_modules/react-native`
Fetching podspec for `Yoga` from `./ReactNative/node_modules/react-native/ReactCommon/yoga`
Downloading dependencies
Installing React (0.44.2)
Installing Yoga (0.44.2.React)
Generating Pods project
Integrating client project

Sending stats
Pod installation complete! There are 14 dependencies from the Podfile and 2 total pods installed.

四、在iOS项目中使用ReactNative
回到ReactNative文件夹目录下新建一个index.ios.js文件用于测试(这里直接复制React的demo了)

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class test extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

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('test', () => test);

然后在ReactNative文件目录下启动React Packager。

cd ReactNative
react-native start

在合适的地方加载React页面，例如官方demo：

#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@interface AppDelegate ()

@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    
    
    NSURL *jsCodeLocation;
    
    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
    
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                     moduleName:@"test"
                                                     initialProperties:nil
                                                     launchOptions:launchOptions];
    rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
    
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    UIViewController *rootViewController = [UIViewController new];
    rootViewController.view = rootView;
    self.window.rootViewController = rootViewController;
    [self.window makeKeyAndVisible];
    
    return YES;
}

@end

在运行前还需要最后一步修改，因为在自动获取ip的时候需要先运行一个react-native-xcode这个shell，特别是在手机上运行的时候，不能使用localhost。使用react-native init 生成项目的话在Run script会执行这个shell，但是自己创建的项目就要手动复制过去了。而且路径也要做一些修改。

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

export NODE_BINARY=node
./ReactNative/node_modules/react-native/packager/react-native-xcode.sh

如果要每次运行自动启动packager的话还可以再把启动packager的复制过来。同理，路径也可能需要修改。

五、Run

最后附上Demo:https://github.com/tion126/ReactNativeDemo