react-native-scratch刮刮卡完成刮取后如何重置以支持再次刮取

核心实现方式 #

方案1：调用组件内置reset方法（优先使用） #

react-native-scratch 组件本身暴露了reset实例方法，通过ref绑定组件后直接调用即可完成重置，无需重新挂载组件，性能最优。

实现步骤：

• 声明ref绑定到Scratch组件
• 需要重置时调用ref.current.reset()
• 刮取完成回调中调用可加100~300ms延时，让用户先看到刮取结果再重置，优化使用体验

方案2：key属性强制重渲染（兼容旧版本） #

如果使用的版本未提供reset方法，可通过给组件绑定动态key的方式，触发React销毁旧组件并重新挂载，实现原生重置效果。

实现步骤：

• 声明一个数字类型的state作为key值
• 需要重置时将key值+1，组件自动重新初始化

完整代码示例 #

import React, { useState, useRef } from 'react';
import { View, Button } from 'react-native';
import Scratch from 'react-native-scratch';

const ScratchCardDemo = () => {
  const scratchRef = useRef(null);
  const [resetKey, setResetKey] = useState(0);

  // 刮取完成逻辑
  const onScratchFinish = () => {
    // 此处为你获取刮取结果的业务逻辑
    console.log('刮取结果已获取');
    
    setTimeout(() => {
      // 优先使用内置reset方法
      if (scratchRef.current) {
        scratchRef.current.reset();
        return;
      }
      // reset方法不可用时切换为key重渲染方案
      setResetKey(prev => prev + 1);
    }, 200);
  };

  return (
    <View>
      <Scratch
        key={resetKey}
        ref={scratchRef}
        // 刮取进度阈值可自定义，示例为刮开70%判定完成
        onScratchProgress={(progress) => progress > 70 && onScratchFinish()}
        // 其余原组件配置保持不变
        brushSize={20}
      />
      <Button 
        title="手动重置刮刮卡" 
        onPress={() => scratchRef.current?.reset() || setResetKey(prev => prev + 1)} 
      />
    </View>
  );
};

export default ScratchCardDemo;

注意事项 #

• 调用实例方法前需判断ref.current是否存在，避免空指针报错
• 使用key方案时不要用随机数作为key值，使用自增数字即可，避免不必要的重复渲染
• 若自定义了刮取完成后的锁定逻辑，重置时需同步更新对应状态标记，避免自定义逻辑阻止二次刮取

内容的提问来源于stack exchange，提问作者Rashid Ali Butt