react-native-canvas fillRect 没有被绘制

Question

我正在尝试使用 react-native-canvas 在 react-native 中绘制一个简单的矩形，这是我的代码：

import React, { useRef, useEffect } from 'react';
import { SafeAreaView, Alert } from 'react-native';
import Canvas from 'react-native-canvas';

export default function App() {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      const ctx = ref.current.getContext('2d');
      if (ctx) {
        ctx.fillStyle = 'red';
        ctx.fillRect(20, 20, 100, 100);
        Alert.alert('Canvas is ready');
      }
    }
  }, [ref]);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Canvas ref={ref} style={{ width: '100%', height: '100%', backgroundColor: 'black' }} />
    </SafeAreaView>
  );
}

程序正在进入if(ctx) 循环，因为正在显示Alert.alert()，但fillRect 和fillStyle 不起作用？

Answer 1

React Native Skia 文档中的This 实现对我有用。

即，用 setTimeout 包装你的 if 函数