отобразить изображение на холсте в реаги-нативе

Question

Я новичок в React-Native и разрабатываю карточную игру. для этого я хочу холст и отображать руку игроков на холсте, но каждый раз, когда я пытаюсь нарисовать изображение, я получаю ошибку. Изображение должно быть инициализировано экземпляром Canvas.

В настоящее время мой код выглядит следующим образом:

class CanvasView extends Component {

       handleCanvas = (canvas) => {

          const image = new Image(canvas/*, 572 / 4, 801 / 9*/);
          image.src = './cards.jpg';
          const context = canvas.getContext('2d');
          image.onload = function() {
            alert("HALLO");
            context.drawImage(image, 0, 0/*, xPos * width, yPos * height, width, height, 0, 0, canvas.width, canvas.height*/);  
        };
      }
      render() {
        return (
          <Canvas width="auto" height="auto" ref={this.handleCanvas}/>
        )
      }
    }

и мой импорт:

import React, { Component}  from 'react';
import { Div } from 'react-native-div' ;
import Canvas from 'react-native-webview' ;
import { Image } from 'react-native-canvas';
import ReactDOM from 'react-dom';
import {
  StyleSheet,
  Button,
  View,
  SafeAreaView,
  Text,
  Alert,
  TouchableOpacity,
} from 'react-native';

, и я попытался импортировать без успеха

import Canvas { Image as ImageView } from 'react-native-webview' ;
import Canvas { Image as ImageView } from 'react-native-canvas' ;
import Image from 'react-native' ;

, и я попробовал эти методы DrawMethods для импорта eath

const image = new Image();
const image = new Image(canvas);
const image = new Image(canvas, height, width);

Я знаю, что путь к изображению правильный, потому что я могу отобразить его с помощью

<Image style={{width: 150, height: 150}} source={require('./cards.jpg')} />

где моя ошибка?