任征的个人博客
0%

React-Native(RN)使用iOS原生组件

Posted on Edited on In
Symbols count in article: 1.8k Reading time ≈ 2 mins.

在RN项目中，有时涉及到原生组件开发。本博客记录了对iOS原生组件基础封装和使用的全过程。

核心步骤

  • 新建一个RCTViewManager子类，管理要封装的组件
  • 添加RCT_EXPORT_MODULE()标记宏命令
  • 实现-(UIView *)view方法

封装一个最简单的组件

iOS原生部分

  1. 在需要供RN调用的模块地方实现RCT_EXPORT_MODULE()宏，将模块暴露给React端，不同于原生组件，原生模块类不需要继承自RCTViewManager以及不需要实现- (UIView *)view方法
  2. 使用RCT_EXPORT_VIEW_PROPERTY()和RCT_EXPORT_METHOD()宏向React端暴露属性和方法(同原生组件)
  3. 若需要回调，则仍需导入#import <React/RCTBridgeModule.h>，并且实现RCTBridgeModule协议，然后就可以使用RCTResponseSenderBlock来实现回调功能

注意：通过Xcode新建的子类，头部导入的是#import 'RCTViewManager.h'，需要手动修改为：#import <React/RCTViewManager.h>

1
2
3
4
5
6
7
8
9
//
//  RZCustomView.h
//

#import <React/RCTViewManager.h>

@interface RZCustomView : RCTViewManager

@end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//
//  RZCustomView.m
//

#import "RZCustomView.h"

@implementation RZCustomView
RCT_EXPORT_MODULE()

- (UIView *)view {
  return [[UIView alloc] init];
}

@end

JS部分

新建一个js导入原生封装的组件
1
2
3
4
5
// NativeCustomView.js
import { requireNativeComponent } from 'react-native';

export default requireNativeComponent('RZCustomView', null);

RN使用原生组件

组件的style设置直接影响所封装组件最底层视图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// App.js
import React, { Component } from 'react';
import {
  StyleSheet,
  View
} from 'react-native';
import RZNativeView from './nativeCustomView.js'

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <RZNativeView style={{height: 50, width: 150, backgroundColor: '#ffa'}} />
        <RZNativeView style={{height: 50, width: 150, backgroundColor: '#f0a', marginTop: 20}} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

效果图

RZNativeView