React Native - FlatList 不滾動

Question

我正在實現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

}

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}}/>包裝平面列表將完成這項工作。 提到的視圖將為平面列表提供空間以適應屏幕。