对 flatList 中的项目进行排序 [英] sorting the items in the flatList

问题描述

在我的 React Native 应用程序中，我展示了我的办公室提供的服务以及这些服务在平面列表中的位置.我还在同一个平面列表中显示了该人员当前地址的服务里程.我希望这些服务按里程排序.下面是我的屏幕数据的样子:

在以下位置提供服务:

123 试驾(313) 231-4560英里:7__________________________234 试驾(450) 222-9999英里:3____________________________121地址驱动器(560) 455-1211英里:1

他们是否可以通过从最小到最大排序来显示这些里程，所以我想显示顶部有 1 英里，然后是 3 英里，然后是 7 英里的服务.以下是示例:

121 地址驱动器(560) 455-1211英里:1____________________________234 试驾(450) 222-9999英里:3____________________________123 试驾(313) 231-4560英里:7

唯一的问题是我正在计算这些里程.里程不是直接来自我的 JSON 文件.我的 JSON 文件中有经度和纬度，我通过使用 geodist 获取确切英里数来获取英里数.

var geodist = require("geodist");var dist = geodist({纬度:item.cLat，经度:item.cLong}，{ 纬度: item.LatL, 经度: item.Long2 },咪");

以下是我用于显示服务地址 Miles 的代码.

render() {返回 (<查看><查看><文本样式={styles.title}>{this.props.navigation.state.params.item.ser}</文本><文本样式={styles.SerContent}>在以下地点提供服务:</文本></查看><查看><平面列表数据={新列表}ItemSeparatorComponent={this.FlatListItemSeparator}renderItem={this._renderItem}keyExtractor={(item, index) =>指数}/></查看></查看>);}

下面是{_renderItem}的代码

_renderItem = ({ item }) =>{var geodist = require("geodist");var dist = geodist({纬度:item.cLat，经度:item.cLong}，{ 纬度: item.LatL, 经度: item.Long2 },咪");返回 (<查看><Text style={styles.Address1}>{item.addr} </Text><Text style={styles.Address1}>{item.phone}</Text><Text style={styles.AddressSpace}>Miles:{dist}</Text></查看>);}

以下是我的 JSON 文件:

<预><代码>[{编号:1"，fk:1，地址: "123 试驾",电话:[phone]"，纬度:33.9387"，Long2:-117.284"，克拉特:33.931"，克隆:-117.40"},{编号:2"，fk:1，地址:234 试驾"，电话:[phone]"，纬度:33.977"，Long2:-117.37"，克拉特:33.93"，cLong:-117.409"},{编号:3"，fk:1，地址: "121 地址驱动器",电话:560)455-1211"，纬度:33.76"，Long2:-116.97"，克拉特:33.9319"，cLong:-117.409"}];

任何帮助将不胜感激.

解决方案

在将数组作为数据提供给 FlatList 之前，您可以按 distance 对数组进行sort

将距离放在状态中可能是个好主意，这样您就不必在排序和 _renderItem 方法中进行计算.

 {const aDist = geodist({纬度:a.cLat，经度:a.cLong}，{纬度:a.LatL，经度:a.Long2}，咪");const bDist = geodist({纬度:b.cLat，经度:b.cLong}，{纬度:b.LatL，经度:b.Long2}，咪");返回 aDist - bDist;})}ItemSeparatorComponent={this.FlatListItemSeparator}renderItem={this._renderItem}keyExtractor={(item, index) =>指数}/>

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
[phone]
Miles: 7
__________________________

234 Test Drive
[phone]
Miles: 3
____________________________

121 Addr Drive
[phone]
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. Below is the sample:

121 Addr Drive
[phone]
Miles: 1
____________________________

234 Test Drive
[phone]
Miles: 3
____________________________

123 Test Drive
[phone]
Miles: 7

the only issue is that I am calculating these miles. The miles are not coming from my JSON file directly. I have Longitude and Latitude in my JSON file and I am getting the miles by using geodist to get the exact miles.

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.

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 = ({ 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:

[
  {
    id: "1",
    fk: 1,
    addr: "123 test drive",
    phone: "[phone]",
    LatL: "33.9387",
    Long2: "-117.284",
    cLat: "33.931",
    cLong: "-117.40"
  },

  {
    id: "2",
    fk: 1,
    addr: "234 Test Drive",
    phone: "[phone]",
    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

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.

<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}
/>

这篇关于对 flatList 中的项目进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！