React native 如何根据平面列表高度设置项目高度

我有一个分页的平面列表，定义如下：

<View style={styles.container}>
      <FlatList
        contentContainerStyle={{height: `${100 * items.length}%`}}
        data={items}
        horizontal={false}
        showsVerticalScrollIndicator={false}
        scrollEventThrottle={200}
        pagingEnabled
        decelerationRate='fast'
        renderItem={onRenderItem}
        keyExtractor={(item) => `${item.id}`}
      />

const onRenderItem = (data: ListRenderItemInfo<any>) => {
    return (
      <View style={{height: `${100/items.length}%`}>
        // view contents goes here
      </View>
    );
  };

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    backgroundColor: '#251818',
  },

---

在前面的代码中，分页被中断，因为FlatList项的高度没有正确映射到FlatList的可见部分。换句话说，每次我尝试从一个项目切换到另一个项目时，都会显示上一个项目的部分内容（而当前项目不会完全显示）

不确定这是否是原因，但您的身高计算对我来说似乎很奇怪。（1） 如果容器高度为

100*x

，则每个项目的高度应为

100

（与您的

100/x

（2）相反）另一件奇怪的事是你同时使用了flex和heights。试着只使用flex，给每个渲染的项目一个

flex:1

，本质上给它们相同的渲染空间。不确定这是否是为什么，但你的高度计算对我来说似乎很奇怪。（1）如果容器高度是

100*x

，那么每个项目都应该有高度

100

（与

100/x

（2）另一个奇怪的事情是你同时使用了flex和heights。试着坚持flex，给每个渲染项目一个

flex:1

，基本上给它们相同的渲染空间。