Есть ли способ анимировать увеличенный размер представления при добавлении новых дочерних элементов?

Question

Я сейчас использую LayoutAnimationдля анимации вида при добавлении детей. Однако, поскольку LayoutAnimation заставляет все анимироваться глобально, и я не могу легко использовать встроенную библиотеку Animated для моего варианта использования, мне интересно, может ли react-native-reanimated помочь.

Вот закуска из моего текущего решения: https://snack.expo.io/@insats/height-adapation

Вот как выглядит результат:

Есть ли способ добиться того же без использования LayoutAnimation? Я просмотрел все примеры в response-native-reanimated, и я прочитал документы, но я все еще не уверен, возможно ли это сделать и как мне начать. Я думал об использованииAnimated чтобы переместить обертку элемента из области просмотра и "прокрутить" ее вверх (используя преобразование translateY) при добавлении элементов, но для этого потребуется фиксированная высота, которой у меня нет.

Answer 1

У меня есть 2 подхода, которые я могу предложить не в своем уме:

1. Вы можете настроить свой LayoutAnimationтолько когда ваше желаемое состояние изменилось. Если использовать хуки, это будет слишком просто:

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

   Или, если вы используете компонент класса, вы можете поймать желаемое изменение состояния в componentDidUpdate:

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

2. Ты можешь использовать 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библиотека. Так что в любом случае вам придется рассчитать высоту!