Question

我一直在使用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,
  }
});

Answer 1

就我而言，我错误地添加了 scrollEnabled={false}。我删除了它并修复了它。如果有人可能有同样的错误。这就是为什么我把它作为回复。

Answer 2

如果我没有错，我80％确定它发生在我身上并且我修复了它为FlatList添加样式并使用flex：1。尝试看看会发生什么！

Answer 3

我不清楚你想要达到什么目标。您的描述表明您希望在页面顶部显示一个图像，然后在列表中显示。但是在分析你的代码时，我发现你正在将一个组件传递给flatList中的renderItem，它将加载一个组件列表（即数据的长度将是组件在屏幕上显示的时间）

组件有一个图像（即图像的数量将再次是数据的长度），在此图像下方，您使用顶部，底部，左侧的属性来设置文本样式。如果您希望在页面顶部放置单个图片，然后加载整个列表，则只需使用Image中的View标记，然后在图片下方加载FlatList。（这将导致图像始终位于顶部，FlatList内的数据将可滚动）

这是回答你的问题还是完全错过了你的观点？

Answer 4

您需要使用ScrollView

反应原生扁平列表不滚动

4 个答案: