如何在 react-native 中将高度设置为 100%？

Question

I have been trying to do:

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

But the one item from the list take the FlatList total height.

I have tried to use minHeight , but same problem.

How can I make my animated height on 100%?

Reproduction

Snack : https://snack.expo.io/@kopax/petrified-cookies

With a browser, the height is not of the height of the <FlatList /> , but on native, it looks like this:

How can I use a dynamic height for this animation?

Answer 1

If your items are of different height then one solution would be to calculate this height using the onLayout function when the Swipeable items are rendered and then use this value for your animation.

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

But if your items are like your example then you can save all these calculations and just give the items the same height.