Loops 使用react native reanimated创建一个循环

我正在尝试使用hooks和react导航5-No类在应用程序中创建一个闪烁功能。 “复活”对我来说是新鲜事。我更熟悉动画，所以这就是为什么我需要一些帮助。谢谢大家!

import React, { useState, useEffect, Component, useCallback } from "react";
import {
  StyleSheet,
  Text,
  View
} from "react-native";
import Animated, { Easing } from "react-native-reanimated";
import { loop } from "react-native-redash";


function BlinkIt(props){
     const [fadeAnim] = useState(new Animated.Value(0));
      useEffect(() => {
        Animated.set(
         fadeAnim,
          loop({
            duration: 5000,
            autoStart: true,
            boomerang: true
          })
        )
      }, []);
      return (
    <Animated.View // Special animatable View
      style={{
        ...props.style,
        opacity: fadeAnim
      }}
    >
      {props.children}
    </Animated.View>
      );
}


export default function App() {
    return (
      <View style={styles.container}> <BlinkIt><Text>The text is blinking</Text></BlinkIt></View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },

});

import React，{useState，useffect，Component，useCallback}来自“React”；
进口{
样式表，
文本，
看法
}从“反应本族语”；
从“react native reanimated”导入动画，{Easing}；
从“react native redash”导入{loop}；
功能闪烁（道具）{
常量[fadeAnim]=useState（新的动画值（0））；
useffect（（）=>{
动画.set(
法迪尼姆，
环路({
持续时间：5000，
自动启动：对，
回力棒：真的
})
)
}, []);
返回(
{props.children}
);
}
导出默认函数App（）{
返回(
文本正在闪烁
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
填充：8，
},
});

我制作了一个视频教程，介绍如何使用

react native reanimated

创建循环动画。或者检查下面列出的代码

import React, {useMemo, useState, useEffect} from 'react';
import {
  TouchableWithoutFeedback,
  Image,
  StyleSheet,
  Dimensions,
} from 'react-native';
import Animated, { Easing, stopClock } from 'react-native-reanimated';

const imageSize = {
  width: 256,
  height: 256,
};

const screenWidth = Dimensions.get('window').width;
const animatedWidth = screenWidth + imageSize.width;

const {
  useCode,
  block,
  set,
  Value,
  Clock,
  eq,
  clockRunning,
  not,
  cond,
  startClock,
  timing,
  interpolate,
  and,
} = Animated;

const runTiming = (clock) => {
  const state = {
    finished: new Value(0),
    position: new Value(0),
    time: new Value(0),
    frameTime: new Value(0),
  };

  const config = {
    duration: 5000,
    toValue: 1,
    easing: Easing.inOut(Easing.linear),
  };

  return block([
    // we run the step here that is going to update position
    cond(
      not(clockRunning(clock)),
      set(state.time, 0),
      timing(clock, state, config),
    ),
    cond(eq(state.finished, 1), [
      set(state.finished, 0),
      set(state.position, 0),
      set(state.frameTime, 0),
      set(state.time, 0),
    ]),
    state.position,
  ]);
}

export const AnimatedBackground = () => {
  const [play, setPlay] = useState(false);
  const {progress, clock, isPlaying} = useMemo(
    () => ({
      progress: new Value(0),
      isPlaying: new Value(0),
      clock: new Clock(),
    }),
    [],
  );

  useEffect(() => {
    isPlaying.setValue(play ? 1 : 0);
  }, [play, isPlaying]);

  useCode(
    () =>
      block([
        cond(and(not(clockRunning(clock)), eq(isPlaying, 1)), startClock(clock)),
        cond(and(clockRunning(clock), eq(isPlaying, 0)), stopClock(clock)),
        set(progress, runTiming(clock)),
      ]),
    [progress, clock],
  );

  return (
    <TouchableWithoutFeedback
      style={styles.container}
      onPress={() => setPlay(!play)}
    >
      <Animated.View style={[styles.image, { opacity: progress }]}>
        <Image
          style={styles.image}
          source={require('./cloud.png')}
          resizeMode="repeat"
        />
      </Animated.View>
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    width: animatedWidth,
    height: '100%',
  },
});

import React，{usemo，useState，useffect}来自'React'；
进口{
可触摸且无反馈，
形象,，
样式表，
尺寸，
}从“反应本机”；
从“react native reanimated”导入动画，{Easing，stopClock}；
常量imageSize={
宽度：256，
身高：256，
};
const screenWidth=Dimensions.get（'window'）.width；
const animatedWidth=屏幕宽度+imageSize.width；
常数{
使用代码，
块
设置
价值
时钟，
情商，
时钟运行，
不
康德，
startClock，
时间，
插入，
以及，
}=动画；
常量运行时间=（时钟）=>{
常量状态={
已完成：新值（0），
位置：新值（0），
时间：新值（0），
帧时间：新值（0），
};
常量配置={
持续时间：5000，
toValue:1，
放松：放松.inOut（放松.linear），
};
返回块([
//我们在这里运行更新位置的步骤
康德(
非（时钟运行（时钟）），
设置（state.time，0），
定时（时钟、状态、配置），
),
cond（等式（状态完成，1）[
设置（state.finished，0），
设置（state.position，0），
设置（state.frameTime，0），
设置（state.time，0），
]),
国家立场，
]);
}
导出常量AnimatedBackground=（）=>{
const[play，setPlay]=useState（false）；
const{progress，clock，isPlaying}=useMemo(
() => ({
进度：新值（0），
显示：新值（0），
时钟：新时钟（），
}),
[],
);
useffect（（）=>{
isPlaying.setValue（播放1:0）；
}，[播放、播放]；
使用代码(
() =>
挡块([
cond（和（非）（时钟运行（时钟）），eq（显示，1）），STARTLOCK（时钟）），
cond（和（时钟运行（时钟）、eq（显示，0））、stopClock（时钟）），
设置（进度、运行定时（时钟）），
]),
[进度，时钟]，
);
返回(
setPlay（！play）}
>
);
};
const styles=StyleSheet.create({
容器：{
弹性：1，
},
图片：{
宽度：动画宽度，
高度：“100%”，
},
});

使用

时钟。。