如何使一个组件淡入而另一个组件淡出？

Question

在类组件中，我有两个视图，一个作为占位符，一个用于图像。占位符会显示，直到某些状态发生变化（当图像完成加载时），然后图像才会显示。我正在尝试添加一些动画，并在状态更改时让图像淡入和占位符淡出。

下面是两个视图的相关渲染函数：

renderImage = (filePath: string): JSX.Element => {
    const { isImageLoaded } = this.state;
    if (isImageLoaded) {
        return (
            <View style={Styles.imageContainer}>
                    <Image source={{ uri: filePath, cache: 'reload' }}/>
            </View>
        );
    }

    return (
        <View style={Styles.placeholderContainer}>
        </View>
    );
};

我知道我需要将视图更改为Animated.View并具有淡入/淡出功能，如下所示：

Animated.timing(this.state.opacity, {
      toValue: 1,
      duration: 500,
      useNativeDriver: true,
    }).start();

setState在状态回调中调用淡入/淡出函数的正确方法是isImageLoaded？或者有没有一种方法可以触发动画而无需手动调用它们setState？

Answer 1

如果可以的话，我建议使用react-native-reanimated (v2). 它有一个完全适合这个用例的功能，使用entering和exiting道具。使用重生的示例：

if (shouldShow) {
   return(
      <Animated.View entering={FadeIn} exiting={FadeOut}>
         <Content/>
      </Animated.View>
   )
}

请参阅：https://www.youtube.com/watch?v =6UXfS6FI674

如果不可能，您必须构建自己的实现。可能是这样的：

handleHideAnimation = () => {
   Animated.timing(value, {
      toValue: 0,
      duration: 500,
    }).start(() => handleUnmountComponent);
}