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

Question

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

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

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 并具有 fade-in/fade-out 功能，如下所示：

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

在 isImageLoaded 状态的 setState 回调中调用 fade-in/fade-out 函数的正确方法是什么？或者有没有办法触发动画而无需在 setState 中手动调用它们？

Answer 1

如果可以，我建议使用react-native-reanimated (v2)。它具有使用 entering 和 exiting 属性完全适用于此用例的功能。使用 reanimated 的示例：

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);
}

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

How to fade one component in while another fades out?

react-native

react-animated