React Native - FlatList 不滚动答案

【问题标题】：React Native - FlatList not scrollingReact Native - FlatList 不滚动
【发布时间】：2021-03-23 20:54:30
【问题描述】：

我正在实现FlatList 的水平模式，但它没有响应。我尝试了以下不起作用的方法：

flex: 1（一切都消失了）
flexGrow: 1
在视图中包裹
添加边距/填充

这是 FlatList 的代码：

   return (
    <View >
    {
      this.state.dataSource.length < 1 ? (
        <Text>did not get person</Text>
      ) : (
      <View><FlatList
        showsHorizontalScrollIndicator={false}
        horizontal
        data={this.state.dataSource}
        renderItem={this.renderItem}
        keyExtractor={item => item.id}
      />
      </View>)

渲染项目

(
  <View style={styles.container}>
    <TouchableWithoutFeedback >
      <ImageBackground source={{ uri: item.download_url }} style={styles.story}>
        <Image source={{ uri: `https://loremflickr.com/320/240/${randomItem}` }} style={{ width: 40, height: 40, borderRadius: 50 }}></Image>
        <Text style={{ color: '#fff' }}>{item.author}</Text>
      </ImageBackground>
    </TouchableWithoutFeedback>
  </View>
)

还有我的样式表

story: {
width: 130,
height: 200,
borderRadius: 10,
overflow: 'hidden',
margin: 3,
justifyContent: 'space-between',
padding: 3,

},
container: {
marginVertical: 20,
borderBottomWidth: 5,
borderTopWidth: 5,
borderTopColor: '#CACBD3',
borderBottomColor: '#CACBD3',
paddingVertical: 10

}

【问题讨论】：

标签： css reactjs react-native flexbox react-native-flatlist

【解决方案1】：

如果您将“flex:1”赋予容器视图，它将按您的意愿工作。

  <View style={styles.flex1} >
     <FlatList
      showsHorizontalScrollIndicator={false}
      horizontal
      data={this.state.dataSource}
      renderItem={this.renderItem}
      keyExtractor={item => item.id}
    />
   </View>

const styles = StyleSheet.create({  
    flex1: {  
        flex: 1,  
    },  
.... 
})

【讨论】：

【解决方案2】：

这可能会有所帮助

return (
  <View style={{ flex: 1 }}>
    {this.state.dataSource.length < 1 ? (
      <Text>did not get person</Text>
    ) : (
      <FlatList
        showsHorizontalScrollIndicator={false}
        horizontal
        data={this.state.dataSource}
        renderItem={this.renderItem}
        keyExtractor={(item, index) => index.toString()}
      />
    )}
  </View>
);

【讨论】：

【解决方案3】：

向平面列表提供 flex:1 将使您的屏幕空白。尝试用<View style={{flex:1}}/> 包装平面列表将完成这项工作。提到的视图将为平面列表提供空间以适应屏幕。

【讨论】：