React Native - Как можно отсортировать элементы в плоском списке в порядке возрастания номеров?

Question

Мои элементы в плоском списке имеют числовые значения c, рассчитанные из базы данных реального времени Firebase с использованием функции получения расстояния, которая использует значения координат. Мне удалось найти способ сортировки элементов списка только по алфавиту. Как я могу расположить предметы от самого низкого до самого высокого расстояния.

renderRow = ({item}) => {    
    return (
        <View>
        <TouchableOpacity 
        onPress={()=>this.props.navigation.navigate('chatpage',item)}
        style={{padding:10,borderBottomColor:'#ccc',borderBottomWidth:1}}>
            <Text style={{fontSize:20}}>{getDistance(
                                          { latitude: lt, longitude: lg },
                                          { latitude: item.latitude, longitude: item.longitude }
                                        )} meters away
            </Text>
        </TouchableOpacity>
</View>
    )
}

    render() {

      const {isLoaded} = this.state;
      if(isLoaded){

      return(
<SafeAreaView>
               <FlatList               
                data={this.state.users}
                renderItem = {this.renderRow}
                keyExtractor={(item) => item.phone}
                />            
            </SafeAreaView> 
                  )     
    }

Answer 1

Вы должны отсортировать свой список перед передачей его в Flatlist. Добавьте эту функцию к вашему компоненту:

sortArray = list => {
   return list.sort((a, b) => (
      getDistance({ latitude: lt, longitude: lg }, { latitude: a.latitude, longitude: a.longitude }) - getDistance({ latitude: lt, longitude: lg }, { latitude: b.latitude, longitude: b.longitude })
   ))
}

и измените свой плоский список для вызова этой функции:

<FlatList               
    data={sortArray(this.state.users)}
    renderItem = {this.renderRow}
    keyExtractor={(item) => item.phone}
    />