React-Native在动画中添加淡入淡出

问题描述

我试图使此卡在每次加载组件时褪色，并在使用挂钩进行卸载后逐渐褪色，但我没有这样做，非常需要别人的帮助。请您告诉我如何使用hooks

每次加载和卸载此卡时对其进行动画处理

这是我的组件：

import React,{ useState } from "react";

const Home = (props) => {
  const renderCard = ({ item }) => {
    return (
      //I am trying to add a fadein to this everytime it loads and fadout when It unmounts
      <View>
        <Text style={styles.day}>{item}</Text>
        <MealCards
          item={state[item]}
          navigation={navigation}
          onChange={onChange}
        />
        <View style={styles.divider} />
      </View>
    );
  };
  return (
    <FlatList
      data={days}
      keyExtractor={(item) => item}
      showsHorizontalScrollIndicator={false}
      renderItem={renderCard}
    />
  );
};

解决方法

将组件包装在Animated.View中，并使用不透明度https://reactnative.dev/docs/animated使它淡入动画。

类似

  const [fadeAnim] = useState(new Animated.Value(0));

  React.useEffect(() => {
    Animated.timing(fadeAnim,{
      toValue: 1,duration: 1000,}).start();
  },[]);

  return (
    <Animated.View
      style={{
        opacity: fadeAnim,}}
    >
      {props.children}
    </Animated.View>
  );

上面的代码用于淡入。淡出将在useEffect的返回函数中完成。