React Native Canvas刮刮乐无法显示且报regeneratorRuntime错误求助

问题描述 #

我用React Native开发小型刮刮乐游戏时无法正常显示，在useEffect中调用canvasRef.current触发错误「ReferenceError: Property 'regeneratorRuntime' doesn't exist」。Web端React项目用相同逻辑开发无问题，迁移到移动端后出现该异常。

错误信息 #

ReferenceError: Property 'regeneratorRuntime' doesn't exist

相关代码 #

import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import Canvas from 'react-native-canvas';

const ScratchCard = () => {
const [isScratched, setIsScratched] = useState(false);
const canvasRef = useRef(null);

const handleCanvas = (canvas) => {
if (canvas) {
const ctx = canvas.getContext('2d');
// Set the size of the canvas
canvas.width = 300;
canvas.height = 200;

// Draw the scratchable area
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw the text beneath the scratchable area
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('Scratch to reveal!', 50, canvas.height / 2);
}
};

useEffect(() => {
handleCanvas(canvasRef.current);
}, []);

const handleTouchMove = (event) => {
if (isScratched) return; // If already scratched, no need to continue

const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
const rect = event.target.getBoundingClientRect();
const touchX = event.nativeEvent.locationX - rect.left;
const touchY = event.nativeEvent.locationY - rect.top;

// Scratch off the area
ctx.globalCompositeOperation = 'destination-out';
ctx.arc(touchX, touchY, 10, 0, 2 * Math.PI);
ctx.fill();
};

const handleTouchEnd = () => {
setIsScratched(true);
};

return (
<View style={styles.container}>
<Canvas
ref={canvasRef}
style={styles.canvas}
onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd}
/>
{isScratched && <Text style={styles.message}>You've revealed the content!</Text>}
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
canvas: {
width: 300,
height: 200,
},
message: {
marginTop: 20,
fontSize: 18,
fontWeight: 'bold',
},
});

export default ScratchCard;

解决方案 #

1. 错误根源 #

该错误是由于react-native-canvas内部使用了async/await或生成器函数，但React Native默认Babel配置未包含regeneratorRuntime的polyfill，导致运行时找不到该变量。

2. 修复步骤 #

• 安装依赖：
  执行命令安装Babel相关插件：

  npm install @babel/plugin-transform-runtime @babel/runtime --save-dev
  

• 修改Babel配置：
  编辑项目根目录的babel.config.js，添加插件配置：

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      ['@babel/plugin-transform-runtime', {
        helpers: true,
        regenerator: true
      }]
    ]
  };
  

• 修正画布初始化逻辑：
  原代码中useEffect执行时canvasRef.current可能尚未初始化，改用Canvas组件的onLoad回调来初始化画布，删除原useEffect代码，修改Canvas组件：

  <Canvas
    ref={canvasRef}
    style={styles.canvas}
    onLoad={handleCanvas} // 替换useEffect的初始化逻辑
    onTouchMove={handleTouchMove}
    onTouchEnd={handleTouchEnd}
  />
  

• 清除缓存并重启服务：

  npx react-native start --reset-cache
  

  之后重新运行Android或iOS项目：

  npx react-native run-android # Android
  npx react-native run-ios     # iOS
  

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