反应原生平面列表不滚动

Posted 2023-03-07

【中文标题】反应原生平面列表不滚动

【英文标题】：React native flatlist not scrolling

【发布时间】：2018-03-22 10:22:12

【问题描述】：

我已经多次使用 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,
  
);

【问题讨论】：

为什么 top: 415 用于 containerStyle？

@AnjalSaneen 因为我需要将列表放置在带有图像的某些视图下

那么给top: 415表示flatlist的样式，可以去掉container style和holderStyle来检查滚动吗？

@AnjalSaneen 更好，但仍然无法滚动到列表末尾

你在使用top: 415吗？

【参考方案1】：

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

【讨论】：

从FlatList 中删除flex: 1 样式实际上解决了我的滚动问题。

【参考方案2】：

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

【参考方案3】：

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

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

这是回答你的问题还是我完全错过了你的意思？

【参考方案4】：

您需要使用ScrollView