0

我有大量的文本数据并分成小部分并保存到数组中（在其 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);

  const currentFrameToAnimate = 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;
4

1 回答 1

0

#gwl002 我采纳了你的建议，看起来我不需要动画，下面的代码似乎可以满足我的要求，我可以看到一系列 qr 代码，现在我看到的唯一问题是因为帧数组长度是 200，这是相当大的，时间加载第一帧的时间很长，屏幕也卡了一段时间，有什么建议可以提高我的代码性能吗？

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;
于 2021-06-29T14:39:46.977 回答