Reactnative与现有原生ios项目集成

2020-05-27 本文已影响0人求长生

植入原生应用

一.手动集成

下面我使用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"
    }
}

执行安装： $cd reactnative$ 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目录,然后启动。 $cd reactnative$ react-native start

[图片上传失败...(image-299c99-1590569895115)]

看到上面的界面就标示我们的服务已经启动啦！

运行iOS项目

通过Xcode点击项目或者command + R运行项目，如果顺利的话，就会看到成功运行的界面：

[图片上传失败...(image-911821-1590569895115)]

Reactnative与现有原生ios项目集成

植入原生应用

猜你喜欢

热点阅读