iOS老项目使用pods集成ReactNative
老项目集成ReactNative，目录结构肯定和react-native init 出来的项目结构不同了，用cocoapods管理会方便很多。这篇文章简单介绍一下基本的集成方式，直接从集成开始，前面那些开发环境搭建就不赘述了。
一、文件目录结构
image.png
在原工程目录下新建一个文件夹放置ReactNative相关的文件。如果只做iOS端的话，直接和工程一起提交到svn/git就好，要和安卓一起的话ReactNative这个文件夹可以单独提交。然后可以设置一下node_modules不提交。
二、初始化ReactNative文件夹
image.png
新建一个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
image.png
如果要每次运行自动启动packager的话还可以再把启动packager的复制过来。同理，路径也可能需要修改。
image.png
五、Run
image.png
image.png
