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。

希望这会有所帮助！