如何創建兩個空間beetwen在反應原生列 - flatList

Question

嗨，我是新的React Native。

我想創建兩個列布局，空間使用反應本地組件名爲flatList。

這是我的看法代碼：

<View style={styles.container}> 
     <FlatList 
      data={db} 
      keyExtractor={ (item, index) => item.id } 
      numColumns={2} 
      renderItem={ 
       ({item}) => (
        <TouchableWithoutFeedback onPress ={() => showItemDetails(item.id)}> 
         <View style={styles.listItem}> 
          <Text style={styles.title}>{item.name}</Text> 
          <Image 
           style={styles.image} 
           source={{uri: item.image}} 
          /> 
          <Text style={styles.price}>{item.price} zł</Text> 
         </View> 
        </TouchableWithoutFeedback> 
       ) 
      } 
     /> 
    </View> 

這裏是風格：

container: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    padding: 10, 
    marginBottom: 40 
}, 
listItem: { 
    maxWidth: Dimensions.get('window').width /2, 
    flex:0.5, 
    backgroundColor: '#fff', 
    marginBottom: 10, 
    borderRadius: 4, 
}, 

而結果是兩列，但沒有之間的空間。 你能幫我解決這個問題嗎？

Answer 1

我還沒有使用這個庫，但將padding: 10添加到listItem樣式應該有所幫助。

Answer 2

只需爲列表項的樣式添加一些邊距即可。

listItem: { 
    margin: 10, 
} 

Answer 3

你得給styles.container到contentContainerStyle歡迎使用屬性Flatlist的，就像這樣：

<FlatList 
     data={db} 
     keyExtractor={ (item, index) => item.id } 
     contentContainerStyle={styles.container} 
     numColumns={2} 
     renderItem={ 
      ({item}) => (
       <TouchableWithoutFeedback onPress ={() => showItemDetails(item.id)}> 
        <View style={styles.listItem}> 
         <Text style={styles.title}>{item.name}</Text> 
         <Image 
          style={styles.image} 
          source={{uri: item.image}} 
         /> 
         <Text style={styles.price}>{item.price} zł</Text> 
        </View> 
       </TouchableWithoutFeedback> 
      ) 
     } 
    />