Question

我在这里找到了很多有关如何对我的Flatlist进行排序的示例，但是我还没有找到一种适合我的情况的方法。情况是，我有一个平面列表，我想根据到项目的距离进行排序。但是，距离是在渲染组件中计算的。

Firebase在将项目添加到日期库时会存储位置（纬度，经度坐标）。从该位置和用户位置，我使用geolib库计算距离。但是，在几个屏幕上使用了平面列表中的样式，因此我将其放置在单独的文件中。在此文件中，将计算距离，因此不在生成平面列表的屏幕上。我在此文件中执行此操作是因为我想为每个项目计算此值，并且不确定如何在我的searchItem屏幕中执行此操作。

searchItemScreen相关代码。从Redux获取Date = {Items}。 itemData.Item.Location包含用于计算ItemList文件中距离的GPS坐标；

    return (
        < FlatList
            onRefresh={loadProducts}
            refreshing={isRefreshing}
            data={Items}
            keyExtractor={item => item.id}
            renderItem={itemData =>
                <ItemList
                    image={itemData.item.imageUrl}
                    make={itemData.item.make}
                    model={itemData.item.model}
                    licenseplate={itemData.item.licenseplate}
                    location={itemData.item.location} 
                    onSelect={() => {
                        selectItemHandler(itemData.item.id, itemData.item.make, itemData.item.model)
                    }}
                />} />
    );
};

因此，在我的ItemList组件中，我创建了一个包含图像和一些基本信息的视图。因为我也在其他三个屏幕上使用了此功能，所以我将其与searchItemScreen分开创建。首先，我从位置坐标计算距离。之后，将显示“平面视图”。

getLocationHandler = async () => {
    let calcDistance = getDistance(
        { latitude: props.location.lat, longitude: props.location.lng },
        { latitude: userLocation.lat, longitude: userLocation.lng }
    );
    if (calcDistance >= 1000) {
        let kmDistance = (calcDistance / 1000)
        kmDistance = kmDistance.toFixed(2)
        setDistance(kmDistance)
        setDistanceText('km')
    } else {
        setDistance(calcDistance)
    }
};



return (
    <Card style={styles.itemContainer}>
        <View style={styles.touchable}>
            <TouchableCmp onPress={props.onSelect} useForeground>
                <View>
                    <View style={styles.imageContainer}>
                        <Image style={styles.image} source={{ uri: props.image[0].uri }} />
                    </View>
                    <View style={styles.informationContainer}>
                        <View style={styles.information}>
                            <Text style={styles.text}>{props.make}</Text>
                            <Text style={styles.text}>{props.model}</Text>
                        </View>
                        <View style={styles.information}>
                            <Text style={styles.text}>{props.licenseplate}</Text>
                            <Text style={styles.text}>{distance} {distanceText}</Text>
                        </View>
                        <View style={styles.actions}>
                            {props.children}
                        </View>
                    </View>
                </View>
            </TouchableCmp>
        </View>
    </Card>
)

是否可以使用与项目列表组件之间的计算距离对ItemScreen上的Flatlist进行排序？还是应该在“项目”屏幕上计算距离，如果可以的话，如何对列表中的每个项目进行校正？

根据不同组件的位置对平面清单数据进行排序

0 个答案: