React Native - FlatList 不滚动

Question

我正在实施 FlatList 的水平模式，但它没有响应。我尝试了以下无效的方法：

flex: 1（一切都消失了）
flexGrow: 1
在视图中换行
添加margin/padding

这是 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

}

Answer 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,  
    },  
.... 
})

Answer 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>
);

Answer 3

向平面列表提供 flex:1 将使您的屏幕空白。尝试用 <View style={{flex:1}}/> 包装平面列表就可以了。提到的视图将为平面列表提供适合屏幕的空间。

React Native - FlatList 不滚动

React Native - FlatList not scrolling

css

flexbox

reactjs

react-native

react-native-flatlist