React-Native-Canvas 不绘制整个矩形

Question

在制作另一个应用程序时，我遇到了react-native-canvas 的问题，因此我创建了这个最小的项目。问题是 WebView 比 Canvas 小得多，并且在应该填满整个画布时没有填满。这是代码（非常类似于example code）：

import React, { Component } from 'react';
import { View } from "react-native"
import Canvas from 'react-native-canvas';

export default class App extends Component {

  handleCanvas = (canvas) => {
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'purple';
    ctx.fillRect(0, 0, 350, 700);
  }

  render() {
    return (
      <View style={{
        width: 350,
        height: 700
      }}>
        <Canvas ref={this.handleCanvas} style={{
          width: 350,
          height: 700,
          borderWidth: 1,
          borderColor: "red"
        }} width={350} height={700} />
      </View>
    )
  }
}

这是应用程序的屏幕截图： 如您所见，应该将矩形呈现为画布的完整大小（以红色勾勒）的代码没有这样做。根据 Expo Inspect-Element 调试工具，WebView（即整个矩形）只有 300 x 150 像素。

我是否遗漏了一些明显的东西？或者这是react-native-canvas 的错误？

顺便说一句，这是在 Android 上。

Answer 1

把它放在你的handleCanvas中：

canvas.width = 400;
canvas.height = 700;