添加新的 children 时，有没有办法为增加的视图大小设置动画？

Question

我目前正在使用 LayoutAnimation 在添加 children 时为视图设置动画。但是，由于 LayoutAnimation 导致一切全局动画化，而且我不能轻易使用 built-in 动画库来适应我的 use-case，我想知道是否react-native-reanimated 可以提供帮助。

这是我当前解决方案的一部分： https://snack.expo.io/@insats/height-adapation

结果如下：

有没有一种方法可以在不使用 LayoutAnimation 的情况下实现同样的效果？我查看了 react-native-reanimated 中的所有示例，并且阅读了文档，但我仍然不确定这是否可行或我应该如何开始。我考虑过在添加项目时使用 Animated 将 item-wrapper 移出可视区域并 "scroll" 向上移动（使用 transform translateY），但这需要固定高度，这我没有。

Answer 1

我可以提出 2 种方法：

只有当您想要的状态发生变化时，您才能配置您的 LayoutAnimation。如果你使用钩子，那就太简单了：

const [state,setState] = useState([]);
useEffect(()=>{
   /*rest code*/
   LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
},[state])

或者如果您使用 class 组件，您可以在 componentDidUpdate:

中捕捉到您想要的状态变化

componentDidUpdate(prevProps,prevState){
   if(prevState.items!==state.items){
       LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
   }
}

您可以使用onLayout视图的功能：

addItem = () => {
   this.setState({
      items: [...this.state.items, {title:'An item',isNew:true}]
   })
}; 
renderItems = () => {
   return this.state.items.map((item, index) => {
      let opacity = new Animated.Value(0);
      return (
        <Animated.View onLayout={({nativeEvent})=>{
           if(this.state.item.isNew){
              // here you got the height from nativeEvent.layout.height
              // Then you have to store the height animate height and opacity to its precise value 
              // PS I used opacity:0 to calculate the height
             }
           }} key={index} style={[styles.item,{opacity}>
          <Text>{item.title}</Text>
        </View>
       )
   });
};

当谈到 react-native-reanimated 时，我认为它是 react-native 的 Animated 库的更快版本。所以无论哪种方式，你都必须计算高度！

添加新的 children 时，有没有办法为增加的视图大小设置动画？

Is there a way to animate the increased size of a View when new children are added?

react-native

react-animated

react-native-reanimated