植入原生应用
一.手动集成
下面我使用Xcode创建一个新的项目作为我们原生的ios项目:
打开Xcode -> Create a new Xcode project -> Single View Application -> ReactnativeIOS
[图片上传失败...(image-bae042-1590569895115)]
现在,我们已经存在一个名为ReactnativeIOS的ios项目,下面我们看看怎么集成reactnative到该项目中。
1、安装react-native
我们在ReactnativeIOS项目目录建一个reactnative目录,用于存放我们的react-native相关文件,再创建一个package.json文件,用于初始化react-native。
[图片上传失败...(image-aa4618-1590569895115)]
//package.json
{
"name": "ReactnativeIOS",
"version": "0.0.1",
"private": true,
"dependencies": {
"react": "^0.14.8",
"react-native": "^0.22.2"
}
}
执行安装: npm install
安装成功后,reactnative目录会产生一个node_modules,里面就是react-native依赖的所有项目包。
2、创建index.ios.js文件
在reactnative目录下创建index.ios.js文件:
//index.ios.js
'use strict';
var React = require('react-native');
var {
Text,
View
} = React;
var styles = React.StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red'
}
});
class SimpleApp extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>This is a simple application.</Text>
</View>
)
}
}
React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
这就是js程序的入口文件。ok,以上我们已经完成react-native的准备工作,接下来要开始集成~
3、手动集成react-native
如果你的项目使用了Cocoapods,可以跳过这一步,直接看“二、 Cocoapods集成react-native”这一步,使用Cocoapods集成react-native。
- 添加react-native工程文件 由于项目没有使用Cocoapods进行第三方依赖包管理,所有我们需要手动将react-native工程包添加到我们的原生ios工程中。打开reactnative/node_modules/react-native目录,找到相关的项目包,将React相关的工程包手动添加到项目中:
添加`react-native/React/React.xcodeproj`到项目中
添加`react-native/Libraries/Network/RCTNetwork.xcodeproj`到项目中
添加`react-native/Libraries/Text/RCTText.xcodeproj`到项目中
添加`react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj`到项目中
添加`react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj`到项目中
如图所示:
[图片上传失败...(image-823b0a-1590569895115)]
添加的原则是,你需要什么就添加什么工程包。好了,我们已经将React相关工程包手动添加到ReactnativeIOS工程项目的reactnative目录下。
- 添加相关frameworks文件 接下来要将相关的frameworks文件添加到工程中,ReactnativeIOS -> TARGETS -> ReactnativeIOS -> Build Phases -> Link Binary Width Libraries。
[图片上传失败...(image-624625-1590569895115)]
点击+号,将所有.a文件选中并添加。
[图片上传失败...(image-eb11f1-1590569895115)]
- 添加搜索头文件的地址 ReactnativeIOS -> TARGETS -> ReactnativeIOS -> Build Settings -> Header Search Paths,添加一条$(SRCROOT)/reactnative/node_modules/react-native/React,选择recursive。
这样我们就react-native集成到现有的ios工程中了。
以上是手动集成react-native工程到现有ios中,如果项目中使用了Cocoapods或者你现在就想用Cocoapods,怎么做呢?
二、Cocoapods集成react-native
如果你已经完成了第三步的手动集成,可以跳过这一步。
-
安装Cocoapods $ gem install cocoapods
-
创建Podfile Cocoapods通过解析Podfile指定的工程文件进行依赖安装,我们在工程目录下创建一个Podfile文件:
# 取决于你的工程如何组织,你的node_modules文件夹可能会在别的地方。
# 请将:path后面的内容修改为正确的路径。
pod 'React', :path => './reactnative/node_modules/react-native', :subspecs => [
'Core',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# 添加其他你想在工程中使用的依赖。
]
记得要添加所有你需要的依赖。举例来说,元素如果不添加RCTText依赖就不能运行。
-
依赖文件安装 进入工程目录,执行$ pod install,就完成了react-native工程包的集成。
-
打开ReactnativeIOS.xcworkspace Cocoapods安装成功之后,工程目录会产生一个ReactnativeIOS.xcworkspace的工程文件,我们使用Xcode打开这个工程打开这个工程文件。
三、添加react-native应用
下面我们在原生ios应用中添加一个视图容器,用于展示react-native实现的内容。
*在原生ios应用添加容器视图 我们在工程文件下创建一个名为ReactView的UIView文件: ReactnativeIOS目录 -> 右键 -> New File -> Cocoa Touch Class -> ReactView,
[图片上传失败...(image-15b9d4-1590569895115)]
修改ReactView.m
#import "ReactView.h"
#import <RCTRootView.h>
@implementation ReactView
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"SimpleApp"
initialProperties:nil
launchOptions:nil];
[self addSubview:rootView];
rootView.frame = self.bounds;
}
return self;
}
@end
ReactView.m中通过http://localhost:8081/index.ios.bundle?platform=ios&dev=true加载bundle文件,由RCTRootView解析转化原生的UIView,然后通过initWithFrame将frame暴露出去。
*在原生ios应用中引用RCTRootView 上面我们创建了一个RCTRootView,怎么在原生应用中引入该View呢? 打开ViewController.m,在viewDidLoad方法中应用我们的ReactView。
#import "ViewController.h"
#import "ReactView.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet ReactView *reactView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
ReactView * reactView = [[ReactView alloc] initWithFrame:CGRectMake(0, 40, CGRectGetWidth(self.view.bounds), 100)];
[self.view addSubview:reactView];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
至此,我们所有的集成工作已经完成,接下来就是运行项目啦。
三、启动开发服务器
在运行我们的项目之前,我们需要先启动我们的开发服务器。进入reactnative目录,然后启动。 react-native start
[图片上传失败...(image-299c99-1590569895115)]
看到上面的界面就标示我们的服务已经启动啦!
运行iOS项目
通过Xcode点击项目或者command + R运行项目,如果顺利的话,就会看到成功运行的界面:
[图片上传失败...(image-911821-1590569895115)]
网友评论