Как установить ширину и высоту сцены на 100% React Konva

Нет. Вы должны установить размер Konva.Stage со значением в пикселях.

Если вы хотите использовать значения 100%, вам нужно установить такие значения в родительский контейнер <div> сцены с помощью CSS. Затем вычислите размер этого <div> в пикселях и используйте его для рабочей области.

Взгляните на Демонстрацию адаптивного холста.

var container = document.querySelector('#stage-parent');
stage.width(container.offsetWidth);
stage.height(container.offsetHeight);

Поскольку мы не можем установить ширину и высоту на «100%», вместо этого мы должны найти ширину и высоту его родительского контейнера в пикселях, а затем установить эти значения для ширины и высоты.

import React, { useEffect, useRef, useState } from "react"

import { Stage, Layer, Rect } from "react-konva"

export const View = () => {
  const divRef = useRef(null)
  const [dimensions, setDimensions] = useState({
    width: 0,
    height: 0
  })

  // We cant set the h & w on Stage to 100% it only takes px values so we have to
  // find the parent container's w and h and then manually set those !
  useEffect(() => {
    if (divRef.current?.offsetHeight && divRef.current?.offsetWidth) {
      setDimensions({
        width: divRef.current.offsetWidth,
        height: divRef.current.offsetHeight
      })
    }
  }, [])

  return (
    <div ref = {divRef}>
      <Stage width = {dimensions.width} height = {dimensions.height}>
        <Layer>
          <Rect fill = "red" x = {0} y = {0} width = {150} height = {150}></Rect>
        </Layer>
      </Stage>
    </div>
  )
}