React-Native-Canvas 不繪制整個矩形

Question

在制作另一個應用程序時，我遇到了react-native-canvas的問題，所以我創建了這個最小的項目。 問題是 WebView 比 Canvas 小得多，並且沒有填滿整個 canvas。 這是代碼（與示例代碼非常相似）：

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>
    )
  }
}

這是應用程序的屏幕截圖： 如您所見，應該將矩形渲染為 canvas（紅色輪廓）的完整大小的代碼沒有這樣做。 根據 Expo Inspect-Element 調試工具，WebView（即整個矩形）只有 300 x 150 像素。

我錯過了一些明顯的東西嗎？ 或者這是react-native-canvas的錯誤？

順便說一句，這是在 Android 上。

Answer 1

把它放在你的handleCanvas中：

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