React Native - 具有 2 列的 FlatList 未按预期运行

Question

我正在使用具有 2 列的 FlatList，它工作正常，除了少数几行，它占用完整的行，而不是一半。我在 Android 和 iOS 中都有这个问题。我尝试在 Flatlist Github 中提出问题，但没有用 - https://github.com/facebook/react-native/issues/19156#issuecomment-387200626

<FlatList 
    vertical 
    numColumns={2} 
    extraData={this.state} 
    data={this.state.bikeCities} 
    style={styles.CityListView} 
    showsVerticalScrollIndicator={false} 
    keyExtractor={(item, index) => index.toString()} 
    renderItem={({item:rowData, index}) => { 
    if(rowData.country_id == this.state.selectedCountryId) 
    { 
    return( 
          <TouchableOpacity style={styles.FlatListStyle} 
            onPress={() => this.props.citySelection(rowData, 
            this.state.selectedView)}> 
              <Text style={styles.cityText}> . {rowData.name}</Text> 
          </TouchableOpacity> 
         ); 
    } 
}}/>

这里是得到结果的截图-

Screenshot

有人可以帮我解决这个问题吗？

Answer 1

您的代码中的问题是您有条件地呈现行项目，我认为您在列表中看到的空白是因为这些项目不满足条件

if (rowData.country_id == this.state.selectedCountryId)

如果您需要根据某些选择来渲染项目，则预先对数据进行预处理/过滤，然后传递给 FlatList。

希望对您有所帮助！

React Native - 具有 2 列的 FlatList 未按预期运行

React Native - FlatList with 2 columns are not acting as expected

android

ios

react-native

react-native-flatlist