React Native - FlatList с 2 столбцами не работает должным образом - PullRequest
Новая
       5

React Native - FlatList с 2 столбцами не работает должным образом

0 голосов
/ 12 мая 2018

Я использую FlatList с 2 столбцами, он работает нормально, за исключением нескольких строк, он занимает всю строку вместо половины.У меня есть эта проблема как в 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> 
         ); 
    } 
}}/>

Вот скриншот полученного результата -

Снимок экрана

Кто-нибудь может мне помочь с этой проблемой?

1 Ответ

0 голосов
/ 12 мая 2018

Проблема в вашем коде заключается в том, что вы условно визуализируете элемент строки, я думаю, что пробел, который вы видите в списке, связан с тем, что условие не соответствует этим элементам

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

Если вам нужно визуализировать элемент на основе некоторого выделения, предварительно обработайте / отфильтруйте данные и затем передайте их в FlatList.

Надеюсь, это поможет!

...