隐藏视图很慢

问题描述

我在本机应用程序中有一个视图，如图所示。我已经为相应的视图添加了CSS。为了使可视化清晰，绿色视图不在红色视图的顶部，而是红色视图在绿色视图之后。

用例-我想隐藏绿色视图，以使红色视图占据整个空间并平滑过渡。

我一直在尝试使用react-native提供的Animated在事件调用中隐藏绿色视图。我尝试在translationY上应用动画，但是由于预期的视图移出了可见区域，但实际占用区域没有减少。我尝试将其应用到高度上，然后收到一个错误，提示useNativeDriver: true在高度上不起作用。因此我删除了它，并且行为突然从平稳过渡到极度缓慢，过渡过程中停了很长时间。

Animated.timing(this.state.animation,{
            tovalue: 94,duration: 100,easing: Easing.in,useNativeDriver: true
        })

现在要想在高度变化且平滑过渡的情况下添加动画似乎是不可能的任务。

如何实现我想要的行为？

react: 16.8.3
react-native: 0.59.8

解决方法

在您的情况下，这会导致性能问题，因为视图会相互影响。随着大小的变化，它不应影响其他对象。这将导致所有内容都重新渲染，并且渲染是最昂贵的过程。

您还尝试过react-native-reanimated吗？