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

Question

我试图让这张卡在每次加载组件时淡入，并在使用钩子卸载后淡出，但我没有这样做，迫切需要有人帮助。请你告诉我如何使用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}
    />
  );
};

Answer 1

将您的组件包裹在 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的返回函数中完成。