0

这是一个开放的 GitHub 问题Github 问题

这是世博小吃

出于某种原因，变量在画布函数内部没有递增，而外部工作正常。请看一下我的代码：

function home ({ navigation }) {

const [counter, setCounter] = useState(330);

      useEffect(() => {
      const timeout = setTimeout(() => {
      setCounter(counter + 1);
      }, 1000);
  
      return () => {
      clearTimeout(timeout);
      };
  }, [counter]);

console.log('outside ', counter);

    const _onGLContextCreate = (gl) => {
        var ctx = new Expo2DContext(gl);

     //   setInterval(() => {
     //       console.log('set interval doesnt refresh too ', counter);
     //   }, 1000);

console.log('inside ', counter);
    
    let circle = {
        x: counter, 
        y: 100,
        radius: 30,
        color: 'black'
    }
    
    let circle2 = {
        x: 400,
        y: 100,
        radius: 30,
        color: 'blue'
    }
    
        function drawCircle() {
            ctx.beginPath();
            ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
            ctx.fillStyle = circle.color;
            ctx.fill();
            ctx.closePath();
        }
    
        function drawCircle2() {
            ctx.beginPath();
            ctx.arc(circle2.x, circle2.y, circle2.radius, 0, Math.PI * 2);
            ctx.fillStyle = circle2.color;
            ctx.fill();
        }

        function update() {
            drawCircle();
            drawCircle2();
        }

        function animate() {
        ctx.clearRect(0, 0, ctx.width, ctx.height);
        requestAnimationFrame(animate);
    
        update();
    
        ctx.flush();
        }
    
        animate();
    
        ctx.stroke();
        ctx.flush();
    };

    
    return (
            <GLView style={{ flex: 1 }} onContextCreate={_onGLContextCreate} />
    );
}

export { home };

以下是日志显示的内容：

outside  330
inside  330
outside  331
outside  332
outside  333
outside  334
outside  335
outside  336
outside  337

有谁知道为什么在画布中被读取一次，以及在画布函数中增加它的解决方案是什么？

4

1 回答 1

1

我不知道到底是什么原因，但我发现了架构中的问题，当我修复它们时它就起作用了。TL；DR 在这里查看结果https://snack.expo.dev/@dozsolti/expogl-ball

  1. 您不需要重新渲染组件，因为您只更新了画布，因此 useState 将与 useRef 交换。此外，您可能打算每秒更新一次计数器，因此我将 useTimeout 更改为 useInterval。（useTimeout 之所以起作用，只是因为它在一个带有更新的计数器依赖项的 useEffect 中，有点像在调用自己。正确的方法是在加载组件时使用 useEffect 和 setInterval）
  2. 之后你需要counter交换counter.current
  3. 请记住，_onGLContextCreate它只运行一次，因此 circle 和 circle2 对象不会改变。那就是我们我改变了更新中的x值

除此之外，一切看起来都很好，我猜你对代码进行了一些优化，比如创建一个DrawCircle以 x,y 作为参数的函数，等等。

于 2022-01-08T10:01:29.357 回答