Android平台react-native-canvas WebView尺寸异常，无法绘制完整矩形

问题本质 #

这个是组件在Android平台的加载时序bug，跟你照着官方示例写的代码没有关系：

• RN层渲染的Canvas外框（你加了红边框的那个350x700区域）尺寸是完全正常的
• 但组件内部套的WebView，以及WebView里真正用来绘图的HTML canvas元素，没有被同步你传的尺寸，一直卡着浏览器默认的300x150初始值
• 最后就会出现你看到的效果：外框够大，但紫块只在左上角一小块，根本填不满区域

具体修复方法 #

别只靠组件自带的width/height prop传值，得在ref回调拿到canvas实例之后，手动给实例把宽高赋值上，强制把绘图缓冲区的尺寸同步过来，调整后的核心逻辑如下：

handleCanvas = (canvas) => {
  // 手动赋值宽高，解决WebView没加载完导致的尺寸被重置问题
  canvas.width = 350;
  canvas.height = 700;

  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'purple';
  // 直接读实例上的宽高做绘制范围，不要硬编码数值
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

额外提两个容易踩的坑：

• 别搞混两个尺寸的作用：写在组件style里的宽高，只控制RN层面的组件占位大小；canvas.width/canvas.height才是真正控制绘图区域的DOM属性，这个属性默认就是300x150，不手动赋值的话，哪怕你把组件样式拉满全屏，绘制的内容还是只会在左上角那块小区域里，还会被CSS强行拉伸变形。
• 如果是做动态尺寸适配（比如根据屏幕宽度计算Canvas大小），一定要在拿到canvas实例之后再赋值，不要在render阶段就提前给DOM属性传值，Android端WebView加载慢，太早传的值会被默认的300x150覆盖掉。

内容的提问来源于stack exchange，提问作者Brian Ton