本篇文章将带领大家把React Native 集成到iOS Native 项目中，实现OC和React Native的混合开发
一、准备工作：
搭建React Native 开发环境，还没有搭建好的同学，可以参照React Native 中文网进行搭建，里面的文档已经很明了了。
本次我们还需要cocoapods ，ios的三方库管理工具，用于把React Native framework 导入到ios Native 项目中
tips:还没有安装cocoapods的百度上有很多安装的教程，这里不再叙述
二、开始集成React Native
1）首先新建一个ios Obj-c Native 工程，在这里我们取名为OCToRNTestDemo�
2）我们在工程根目录下创建一个文件夹，用于存放React Native 模块，这个文件夹可以自己取名（在这里我们取名为RNComponent）如图：
image.png
3）在RNComponent这个文件夹内，我们创建一个package.json的文件，用于初始化React Native 。 注意这个package.json文件名字是固定的。
4）然后我们在这个package.json文件内指定react native 的版本号等信息，如图:
image.png
我们需把第一行的name 改为本工程的名字(OCToRNTestDemo)
tips:我们可以先init[react-native init RNTextdemo]一个RN的项目,然后把这个项目中的package.json文件给复制到RNComponent这个文件夹内。
- 下面我们用npm install 操作安装React Native模块
打开命令终端 cd 到RNComponent文件夹下
输入命令: npm install
安装完成之后，接下来我们用cocopods关联React Native依赖。
- cd 到ios工程根目录下 ，
输入：pod init
然后：vim podfile
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target 'OCToRNTestDemo' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
# use_frameworks!
pod 'Yoga', :path=> './RNComponent/node_modules/react-native/ReactCommon/yoga'
pod 'React', :path => ‘./RNComponent/node_modules/react-native', :subspecs => [
'Core',
'ART',
'RCTActionSheet',
'RCTAdSupport',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'RCTLinkingIOS'
]
# Pods for OCToRNTestDemo
target 'OCToRNTestDemoTests' do
inherit! :search_paths
# Pods for testing
end
target 'OCToRNTestDemoUITests' do
inherit! :search_paths
# Pods for testing
end
end
tips:
- path 中的RNComponent改为刚刚你自己在工程根目录下建的文件夹名字
- pod 'Yoga' 这行代码如果不指定yoga，在pod install 时可能会报找不到yoga的错误
3.数组中的pod 'React', :path => ‘./RNComponent/node_modules/react-native', :subspecs => [
'Core',
'ART',
'RCTActionSheet',
'RCTAdSupport',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'RCTLinkingIOS'
] 视你需要用到的库，如果不需要则可以删除
修改好podfile文件后运行：pod install
image.png
这样便添加好了依赖
7） 在RNComponent 添加index.ios.js 的RN入口文件
文件代码：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
FlatList
} from 'react-native';
class NativeRNApp extends Component {
render() {
return (
<View style={styles.container}>
<FlatList
renderItem={({item})=>{
return <Text style={{paddingTop:30,fontSize:30}}>{item.key}</Text>
}}
data={[{key:'a'},{key:'b'}]}
/>
</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('OCToRNTestDemo', () => NativeRNApp);
8）在ios工程中，我们需要修改info.plist文件，读取本地的npm 服务器
添加如下代码到info.plist文件中
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
9）在ViewController中导入RCTRootView
#import <React/RCTRootView.h>
在viewDidload方法中，我们把rootView初始化出来，添加到ViewController的view上
- (void)viewDidLoad {
[super viewDidLoad];
NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"OCToRNTestDemo" initialProperties:nil launchOptions:nil];
[self.view addSubview:rootView];
rootView.frame = CGRectMake(0, 0, 300, 300);
rootView.center = self.view.center;
}
里面的moduleName为该项目的名字
10）最后运行该项目
首先 cd 到RNComponent 文件夹下，输入：npm start 开启package
开启之后运行该ios项目，自此，已经把React Native 集成到了iOS原生项目中
image.png
网友评论