iOS端react-native-signature-capture双签名框同步更新问题排查

看起来你遇到的两个问题（多签名框、保存时签名值同步）核心原因都是原生端事件机制的全局广播以及组件实例管理的疏漏，下面是针对性的分步解决方案：

1. 先解决「保存一个签名框时两个值同步」的核心问题 #

这个问题的根源是原生代码里使用了全局设备事件sendDeviceEventWithName通知RN端保存结果——当页面中有多个签名组件实例时，所有监听该事件的组件都会收到同一份数据，导致签名值被意外覆盖。我们需要把全局事件改成组件实例专属的回调机制：

步骤1：修改RSSignatureView的回调逻辑 #

首先在RSSignatureView.h中添加实例专属的回调block（如果没有这个头文件，需创建或修改现有文件）：

#import <UIKit/UIKit.h>
#import <React/RCTView.h>

@interface RSSignatureView : RCTView
// 保留原有属性...
@property (nonatomic, copy) void (^onSave)(NSString *tempPath, NSString *encoded);
@property (nonatomic, copy) void (^onDrag)(void);
@end

然后在RSSignatureView.m中，把原来通知manager发送全局事件的逻辑，替换为直接调用自身的回调block：

// 替换原来调用[self.manager publishSaveImageEvent:...]的代码
- (void)saveImage {
    // 保留原有生成tempPath和encoded字符串的保存逻辑...
    
    // 触发当前实例的专属回调
    if (self.onSave) {
        self.onSave(tempPath, encoded);
    }
}

// 同理修改拖拽事件的触发逻辑
- (void)handleDragGesture {
    // 保留原有拖拽处理逻辑...
    
    if (self.onDrag) {
        self.onDrag();
    }
}

步骤2：更新RSSignatureViewManager的代码 #

修改RSSignatureViewManager.m，移除全局事件相关代码，改为导出视图的回调属性，同时修复全局实例变量可能导致的视图复用问题：

#import "RSSignatureViewManager.h"
#import <React/RCTBridgeModule.h>
#import <React/RCTBridge.h>
#import <React/RCTUIManager.h>

@implementation RSSignatureViewManager
@synthesize bridge = _bridge;
// 移除全局的signView实例变量，确保每个组件实例拥有独立的RSSignatureView
// @synthesize signView;

RCT_EXPORT_MODULE()

// 导出原有属性
RCT_EXPORT_VIEW_PROPERTY(rotateClockwise, BOOL)
RCT_EXPORT_VIEW_PROPERTY(square, BOOL)
RCT_EXPORT_VIEW_PROPERTY(showBorder, BOOL)
RCT_EXPORT_VIEW_PROPERTY(showNativeButtons, BOOL)
RCT_EXPORT_VIEW_PROPERTY(showTitleLabel, BOOL)

// 导出新的回调属性
RCT_EXPORT_VIEW_PROPERTY(onSave, RCTBubblingEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onDrag, RCTBubblingEventBlock)

-(dispatch_queue_t) methodQueue {
    return dispatch_get_main_queue();
}

-(UIView *) view {
    // 为每个组件实例创建独立的RSSignatureView
    RSSignatureView *signView = [[RSSignatureView alloc] init];
    // 若不需要manager引用可移除此行；若需要则确保每个view绑定当前manager实例
    // signView.manager = self;
    return signView;
}

// 保留原有saveImage和resetImage方法，逻辑不变
RCT_EXPORT_METHOD(saveImage:(nonnull NSNumber *)reactTag) {
    [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
        RSSignatureView *view = viewRegistry[reactTag];
        if (!view || ![view isKindOfClass:[RSSignatureView class]]) {
            RCTLogError(@"Cannot find NativeView ", reactTag);
            return;
        }
        [view saveImage];
    }];
}

RCT_EXPORT_METHOD(resetImage:(nonnull NSNumber *)reactTag) {
    [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
        RSSignatureView *view = viewRegistry[reactTag];
        if (!view || ![view isKindOfClass:[RSSignatureView class]]) {
            RCTLogError(@"Cannot find NativeView with tag", reactTag);
            return;
        }
        [view erase];
    }];
}

// 移除原来的publishSaveImageEvent和publishDraggedEvent方法
@end

步骤3：更新RN端组件的使用方式 #

把原来通过DeviceEventEmitter监听全局事件的代码，改成直接使用组件的props回调，每个签名框绑定独立的处理逻辑：

import SignatureCapture from 'react-native-signature-capture';

// 在你的RN组件中
<SignatureCapture
  ref={ref => this.signature1 = ref}
  onSaveEvent={(result) => {
    // 处理第一个签名框的保存结果
    console.log('Signature 1 saved:', result);
  }}
  onDragEvent={() => {
    // 处理第一个签名框的拖拽事件
  }}
  // 其他属性
/>

<SignatureCapture
  ref={ref => this.signature2 = ref}
  onSaveEvent={(result) => {
    // 处理第二个签名框的保存结果
    console.log('Signature 2 saved:', result);
  }}
  onDragEvent={() => {
    // 处理第二个签名框的拖拽事件
  }}
  // 其他属性
/>

2. 解决iOS端「出现两个签名框」的问题 #

这个问题大概率是以下原因之一：

• RN端重复渲染了SignatureCapture组件：检查你的JSX代码，是否不小心渲染了两次该组件。
• 原生视图布局问题：检查RSSignatureView的初始化逻辑，是否因为showNativeButtons等属性开启后，额外的按钮栏被误认为是签名框。
• 全局实例变量导致的视图复用：我们在步骤2中已经移除了manager里的全局signView变量，每个组件实例都会创建独立的RSSignatureView，这也能避免视图复用导致的重复显示问题。

验证方案 #

修改完代码后，执行以下操作：

1. 清理iOS端缓存：cd ios && pod install && cd ..
2. 重新运行RN项目：react-native run-ios
3. 测试多个签名框的保存功能，确认每个签名框的结果独立，不会互相覆盖，且签名框数量正确。

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