反应本机平面列表不滚动

我已经使用 FlatList 很多次了，但从未有过这样的经历。我有一个视图，页面顶部有一个图像，而我的列表在下面。当我尝试滚动时，列表弹到顶部。

对此找不到好的解决方案。

这是我的清单：

  <FlatList
    data={this.props.comments.data}
    renderItem={this.renderDetailsItem}
    keyExtractor={(item, index) => index}
    />

 renderDetailsItem({ item, index }) {
    return (<CardDetailsComment
    key={item.id}
    imageUrl={item.profileImage}
    username={item.username}
    comment={item.data}
    time={item.createdAt}
    />);
        }

这是我的 CardDetailsComment 组件：

const CardDetailsComment = (props) => {
  return (
      <View style={styles.containerStyle}>
      <Image
      style={styles.avatarStyle}
      source={{ uri: props.imageUrl }}
      />
      <View style={styles.holderStyle}>
      <Text style={styles.userStyle}>
       { props.username }
      </Text>
      <Text style={styles.timeStyle}>
       { props.comment }
      </Text>
      <Text>
       {moment.utc(props.time, 'YYYY-MM-DD HH:mm:ss').local().fromNow()}
      </Text>
      </View>
      </View>

  );
};

const styles = StyleSheet.create({
   avatarStyle: {
    height: 40,
    width: 40,
    borderRadius: 20,
  },
   containerStyle: {
     position: 'relative',
     top: 415,
     left: 10,
     bottom: 5,
   },

   holderStyle: {
   display: 'flex',
   flexDirection: 'column',
   position: 'relative',
   left: 50,
   top: -40,
   },

   userStyle: {
     paddingBottom: 5,
   },

   timeStyle: {
    paddingBottom: 10,
  }
});

如果我没记错的话，我 80% 确信这发生在我身上，我通过使用 flex 将样式添加到 FlatList 来修复它： 1. 尝试一下，看看会发生什么！