Как оживить рост до 100% в реактивно-родном?

Question

Я пытался сделать:

        <Animated.View
          style={[{
            height: this.collapse.interpolate({
              inputRange: [0, 1],
              outputRange: ['0%', '100%'],
            }),
          }]}
        >
          {children}
        </Animated.View>

Но один элемент из списка занимает FlatList общую высоту.

Я пытался использовать minHeight, но та же проблема.

Как сделать мой анимационный рост на 100%?

Воспроизведение

Закуска: https://snack.expo.io/@kopax / окаменелое печенье

В браузере высота не равна высоте <FlatList />, а на нативном выглядит примерно так:

Как использовать Dynami c высота для этой анимации?

Answer 1

Если ваши элементы имеют разную высоту, то одним из решений было бы рассчитать эту высоту, используя функцию onLayout при визуализации Swipeable элементов, а затем использовать это значение для анимации.

class GmailStyleSwipeableRow extends Component {
  static animationDeleteDuration = 200; // eslint-disable-line react/sort-comp

  constructor(props) {
    super(props);
    this.collapse = new Animated.Value(1);
    this.height = 75;
  }

  render () {
  return (<Swipeable>
    <Animated.View
        onLayout={event => {
            const { height } = event.nativeEvent.layout;
            this.height = height;
        }}
        style={[
            {
            minHeight: 75, //give it a default minHeight
            height: this.collapse.interpolate({ 
                inputRange: [0, 1],
                outputRange: [0, this.height], //base your animation on the calculated height
            }),
            },
        ]}
        >
      {children}
    </Animated.View>
  </Swipeable>)
  }
}

Но если ваши элементы похожи на ваш пример, вы можете сохранить все эти расчеты и просто присвоить элементам одинаковую высоту.