如何在 react-native 中将高度设置为 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/petrified-cookies

在浏览器中，高度不是<FlatList />的高度，但在本机上，它看起来像这样：

如何为这个动画使用动态高度？

Answer 1

如果您的项目具有不同的高度，那么一种解决方案是在呈现可滑动项目时使用 onLayout 函数计算此高度，然后将此值用于您的动画。

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

但是，如果您的项目与您的示例类似，那么您可以保存所有这些计算，并为项目提供相同的高度。