关于在每次迭代时更新本机组件值并作为动画运行

大佬教程收集整理的这篇文章主要介绍了关于在每次迭代时更新本机组件值并作为动画运行，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决关于在每次迭代时更新本机组件值并作为动画运行？

我有大量的文本数据并分成小部分并保存到数组中（在代码中为 props.frames）
现在我想在迭代列表 "frames" 时将这些片段动画化为 qr 代码。 我尝试了以下但它不起作用。

• 我知道有 Animated.loop API，但我不确定如何在我的情况下应用此逻辑，我的意思是在每次迭代中如何动态刷新 qr 代码值
• 如果您有任何建议，我们将不胜感激。

import React,{useState,useEffect,useRef } from 'react';
import {VIEw,AnimateD} from 'react-native';

import QRCode from 'react-native-qrcode-generator';

function QRCodeLoop(props) {
 // const [frame,setFrame] = useState(0);

  @R_772_5276@urrentFrametoAnimate = useRef(new Animated.Value(0)).current;
  const opacity = useRef(new Animated.Value(0)).current;
  const frame = useRef(new Animated.Value(0)).current;


  //const [frameIndex,setFrameIndex] = useState(0);

  console.log('props.frames length : ' + props.frames.length);

  const frames = props.frames;
  const size = props.size;
  const fps = props.fps;

  let _raf;
  useEffect(() => {
    console.log('QRCodeLoop use effect called ');

    let elapsed;

    const nextFrame = (frame,frames) => {
      frame = (frame + 1) % frames.length;
      console.log('nextFrame:',framE);
      console.log('frames.length:',frames.length);
      return frame;
    };

  },[frames]);

  return (
    <>
      <VIEw style={{position: 'relative',wIDth: size,height: sizE}}>
        {frames.map((chunk,i) => {

        Animated.timing(frame,{
          tovalue: chunk,duration: 1000,useNativeDriver: true
        }).start();

          return (
            <Animated.VIEw
              key={i}
              style={{position: 'absolute',opacity: 1}}>
              <QRCode
                value={Chunk}
                size={sizE}
                bgcolor="purple"
                fgcolor="white"
              />
            </Animated.VIEw>
          );
        })}
      </VIEw>
      
    </>
  );
}

export default QRCodeLoop;

解决方法

import React,{useState,useEffect,useRef} from 'react';
import {View,AnimateD} from 'react-native';

import QRCode from 'react-native-qrcode-generator';

function QRCodeLoop(props) {


  console.log('props.frames length : ' + props.frames.length);
  const size = props.size;
  return (
    <View style={{position: 'relative',width: size,height: sizE}}>
      {props.frames.map((chunk,i) => {
        return (
          <View key={i} style={{position: 'absolute',opacity: 1}}>
            <QRCode
              value={Chunk}
              size={sizE}
              bgColor="purple"
              fgColor="white"
            />
          </View>
        );
      })}
    </View>
  );
}

export default QRCodeLoop;

大佬总结

以上是大佬教程为你收集整理的关于在每次迭代时更新本机组件值并作为动画运行全部内容，希望文章能够帮你解决关于在每次迭代时更新本机组件值并作为动画运行所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。