如何在React Native中使用iOS 16的UIPasteControl组件？

因为React Native没有直接封装UIPasteControl，你需要通过自定义原生UI组件来实现集成，以下是具体可落地的步骤：

一、编写iOS原生模块 #

1. 创建PasteControl管理类 #

创建两个文件：RCTPasteControlManager.h 和 RCTPasteControlManager.m

RCTPasteControlManager.h

#import <React/RCTViewManager.h>

@interface RCTPasteControlManager : RCTViewManager
@end

RCTPasteControlManager.m

#import "RCTPasteControlManager.h"
#import <UIKit/UIKit.h>
#import <UniformTypeIdentifiers/UniformTypeIdentifiers.h>

@interface RCTPasteControl : UIView <UIPasteConfigurationSupporting>
@property (nonatomic, copy) RCTBubblingEventBlock onPaste;
@end

@implementation RCTPasteControl

- (instancetype)init {
    self = [super init];
    if (self) {
        // 创建UIPasteControl实例，默认尺寸44x44
        UIPasteControl *pasteControl = [[UIPasteControl alloc] initWithFrame:CGRectMake(0, 0, 44, 44)];
        pasteControl.target = self;
        [self addSubview:pasteControl];
        
        // 默认允许纯文本粘贴，可通过JS侧传入配置修改
        self.pasteConfiguration = [[UIPasteConfiguration alloc] initWithAcceptableTypeIdentifiers:@[UTTypePlainText.identifier]];
    }
    return self;
}

// 实现UIPasteConfigurationSupporting协议的粘贴处理方法
- (void)pasteItemProviders:(NSArray<NSItemProvider *> *)itemProviders {
    NSItemProvider *provider = itemProviders.firstObject;
    if ([provider hasItemConformingToTypeIdentifier:UTTypePlainText.identifier]) {
        [provider loadObjectOfClass:NSString.class completionHandler:^(id _Nullable object, NSError * _Nullable error) {
            if (!error && object) {
                dispatch_async(dispatch_get_main_queue(), ^{
                    if (self.onPaste) {
                        self.onPaste(@{@"content": object});
                    }
                });
            }
        }];
    }
}

@end

@implementation RCTPasteControlManager

RCT_EXPORT_MODULE()

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

// 导出粘贴回调事件给JS侧
RCT_EXPORT_VIEW_PROPERTY(onPaste, RCTBubblingEventBlock)

// 导出允许的粘贴类型配置属性
RCT_EXPORT_VIEW_PROPERTY(allowedTypes, NSArray)

@end

2. 项目配置 #

确保iOS项目的Podfile已正确链接React Native依赖，将上述文件添加到项目编译目标中（自动链接模式下无需额外配置）。

二、JS侧封装组件 #

创建PasteControl.js文件，封装原生组件：

import React from 'react';
import { requireNativeComponent } from 'react-native';

const RCTPasteControl = requireNativeComponent('RCTPasteControl');

const PasteControl = ({ onPaste, allowedTypes, style }) => {
  const handlePaste = (event) => {
    onPaste?.(event.nativeEvent.content);
  };

  return (
    <RCTPasteControl
      style={style || { width: 44, height: 44 }}
      onPaste={handlePaste}
      allowedTypes={allowedTypes || ['public.plain-text']}
    />
  );
};

export default PasteControl;

三、在React Native页面中使用 #

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import PasteControl from './PasteControl';

const App = () => {
  const handlePaste = (content) => {
    console.log('粘贴内容：', content);
    // 这里添加你的业务逻辑处理
  };

  return (
    <View style={styles.container}>
      <Text>点击按钮粘贴剪贴板内容</Text>
      <PasteControl 
        style={styles.pasteBtn} 
        onPaste={handlePaste}
        allowedTypes={['public.plain-text']}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  pasteBtn: {
    marginTop: 20,
    width: 100,
    height: 40,
  },
});

export default App;

关键说明 #

• UIPasteControl的target必须是实现UIPasteConfigurationSupporting协议的对象，这里我们让自定义的RCTPasteControl类实现该协议来作为target。
• pasteConfiguration需指定UTI类型，比如纯文本对应public.plain-text，图片对应public.image，可根据需求通过JS侧传入修改。
• 这种方式不会触发系统的粘贴权限弹窗，完全符合iOS 16+的设计要求。

内容的提问来源于stack exchange，提问作者Piepants