反应原生平面列表不滚动 [英] React native flatlist not scrolling

问题描述

我一直在使用 FlatList 很多次，从来没有这样的经验.我有一个视图，页面顶部有一个图像，我的列表在下面.当我尝试滚动时，列表跳到顶部.

I've been using FlatList a lot of times, and never had such experience.I'm having one view with an image on top on of a page and my list is below.When I try to scroll, list bounces to the top.

找不到好的解决方案.

这是我的清单:

  <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 组件:

Here is my CardDetailsComment component:

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. Try it看看会发生什么！

If I'm not wrong, I'm 80% sure that it happened to me and I fix it adding style to FlatList with flex: 1. Try it to see what happen!

这篇关于反应原生平面列表不滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！