[英]sorting the items in the flatList
In my react native application, I am showing services that are offered by my office and the location of those services in a flatlist. 在我的本地本机应用程序中,我正在显示办公室提供的服务以及这些服务在单位列表中的位置。 I am also showing the miles of the service from the persons current address in that same flatlist. 我还将在同一单位列表中显示距该人当前地址的服务里程。 I want those services to be sorted by miles. 我希望这些服务按里程排序。 Below is what my screen data looks like: 以下是我的屏幕数据:
Services are available in the following locations: 在以下位置提供服务:
123 Test Drive
(313) 231-4560
Miles: 7
__________________________
234 Test Drive
(450) 222-9999
Miles: 3
____________________________
121 Addr Drive
(560) 455-1211
Miles: 1
Is their any way I can display these miles by sorting them from least to the highest so I want to display the service that has 1 Miles at the top and then 3 miles after it and then 7 miles after that. 是我可以通过按从最小到最高的顺序显示这些里程的任何方式来显示这些里程的,所以我想显示的服务的顶部具有1英里,然后具有3英里,然后具有7英里。 Below is the sample: 下面是示例:
121 Addr Drive
(560) 455-1211
Miles: 1
____________________________
234 Test Drive
(450) 222-9999
Miles: 3
____________________________
123 Test Drive
(313) 231-4560
Miles: 7
the only issue is that I am calculating these miles. 唯一的问题是我正在计算这些里程。 The miles are not coming from my JSON file directly. 里程不是直接来自我的JSON文件。 I have Longitude and Latitude in my JSON file and I am getting the miles by using geodist to get the exact miles. 我的JSON文件中包含经度和纬度,并且通过使用geodist获取确切的里程来获取里程。
var geodist = require("geodist");
var dist = geodist(
{ lat: item.cLat, lon: item.cLong },
{ lat: item.LatL, lon: item.Long2 },
"mi"
);
Below is my code for displaying the services address, Miles. 以下是用于显示服务地址Miles的代码。
render() {
return (
<View>
<View>
<Text style={styles.title}>
{this.props.navigation.state.params.item.ser}
</Text>
<Text style={styles.SerContent}>
Service is available in the following locations:
</Text>
</View>
<View>
<FlatList
data={newList}
ItemSeparatorComponent={this.FlatListItemSeparator}
renderItem={this._renderItem}
keyExtractor={(item, index) => index}
/>
</View>
</View>
);
}
Below is the code for {_renderItem} 以下是{_renderItem}的代码
_renderItem = ({ item }) => {
var geodist = require("geodist");
var dist = geodist(
{ lat: item.cLat, lon: item.cLong },
{ lat: item.LatL, lon: item.Long2 },
"mi"
);
return (
<View>
<Text style={styles.Address1}>{item.addr} </Text>
<Text style={styles.Address1}>{item.phone}</Text>
<Text style={styles.AddressSpace}>Miles:{dist}</Text>
</View>
);
}
Below is my JSON file: 以下是我的JSON文件:
[
{
id: "1",
fk: 1,
addr: "123 test drive",
phone: "(313) 231-4560",
LatL: "33.9387",
Long2: "-117.284",
cLat: "33.931",
cLong: "-117.40"
},
{
id: "2",
fk: 1,
addr: "234 Test Drive",
phone: "(450) 222-9999",
LatL: "33.977",
Long2: "-117.37",
cLat: "33.93",
cLong: "-117.409"
},
{
id: "3",
fk: 1,
addr: "121 Addr drive",
phone: "560) 455-1211",
LatL: "33.76",
Long2: "-116.97",
cLat: "33.9319",
cLong: "-117.409"
}
];
Any help will be greatly appreciated. 任何帮助将不胜感激。
You could sort
the array by distance
before you give it as data to the FlatList
您可以FlatList
distance
对数组进行sort
,然后再将其作为数据提供给FlatList
It would probably be a good idea to put the distance in the state, so that you don't have to do the calculations in both the sorting and in the _renderItem
method. 将距离设置为状态可能是一个好主意,这样就不必在排序和_renderItem
方法中都进行计算。
<FlatList
data={newList.sort((a, b) => {
const aDist = geodist(
{ lat: a.cLat, lon: a.cLong },
{ lat: a.LatL, lon: a.Long2 },
"mi"
);
const bDist = geodist(
{ lat: b.cLat, lon: b.cLong },
{ lat: b.LatL, lon: b.Long2 },
"mi"
);
return aDist - bDist;
})}
ItemSeparatorComponent={this.FlatListItemSeparator}
renderItem={this._renderItem}
keyExtractor={(item, index) => index}
/>
Using the Tholle method, i used the Geolib Liberary . 通过Tholle方法,我使用了Geolib Liberary 。 And using the method getDistance to compare distances this is the result. 并使用getDistance方法比较距离,这就是结果。
<FlatList data={newList.sort((a, b) => {
const aDist = getDistance({ //get distance between plaza and current location
latitude: a.latitud,
longitude: a.longitud
}, {
latitude: latitude,
longitude: longitude,
})
const bDist = getDistance({ //get distance between plaza and current location
latitude: b.latitud,
longitude: b.longitud
}, {
latitude: latitude,
longitude: longitude,
})
return aDist - bDist; })} ItemSeparatorComponent={this.FlatListItemSeparator} renderItem={this._renderItem}keyExtractor={(item, index) => index} />
Where latitude and longitud are the user's lcoation and the object data has already a latitude and longitude. 其中纬度和经度是用户的习惯,并且对象数据已经具有纬度和经度。 Dont forget to import: 不要忘记导入:
import {getDistance} from 'geolib';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.