对 flatList 中的项目进行排序

IT技术 javascript reactjs react-native react-android
2022-07-05 00:46:01

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

在以下地点提供服务：

123 Test Drive
(313) 231-4560
Miles: 7
__________________________

234 Test Drive
(450) 222-9999
Miles: 3
____________________________

121 Addr Drive
(560) 455-1211
Miles: 1

他们有什么办法可以通过从最小到最高排序来显示这些里程，所以我想显示顶部有 1 英里，然后是 3 英里，然后是 7 英里的服务。以下是示例：

121 Addr Drive
(560) 455-1211
Miles: 1
____________________________

234 Test Drive
(450) 222-9999
Miles: 3
____________________________

123 Test Drive
(313) 231-4560
Miles: 7

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

var geodist = require("geodist");
var dist = geodist(
  { lat: item.cLat, lon: item.cLong },
  { lat: item.LatL, lon: item.Long2 },
  "mi"
);

下面是我显示服务地址的代码，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>
  );
}

以下是 {_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>
  );
}

下面是我的 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"
  }
];

任何帮助将不胜感激。

2个回答

您可以先将sort数组distance作为数据提供给FlatList

将距离置于状态中可能是一个好主意，这样您就不必在排序和_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}
/>

使用 Tholle 方法，我使用了Geolib Liberary。并使用 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} />

其中纬度和经度是用户的位置，并且对象数据已经具有经度和纬度。不要忘记导入：

import {getDistance} from 'geolib';
其它你可能感兴趣的问题
上一篇使用 reactjs 将数据保存在表单中 下一篇我可以在没有自己的后端服务器的情况下在 React 中实现 Stripe 结账吗？