React native 如何订购组件

我想按与用户的距离订购我的组件

PlaceList.js

class PlaceList extends Component {
    render() {
        return (
            <ScrollView style={styles.scrollStyle}>
                <Place key={place.id} place={place} lat={this.state.latitude} long={this.state.longitude}/>
            </ScrollView>
        );
    }
}

类放置列表扩展组件{
render（）{
返回(
);
}
}

Place.js

const SomePlace = ({ place, lat, long }) => {

    return (
        <Card>
            <CardSection>
                <Text>
                    You are {haversineDistance()} miles away
                </Text>
            </CardSection>
        </Card>
    );
}

constsomeplace=（{place，lat，long}）=>{
返回(
您距离{haversineddance（）}英里
);
}

我已经缩短了代码，它正在工作。该列表显示与用户保持正确距离的所有“我的位置”。我只是不确定从哪里开始订购组件。我是个新来的土生土长的人！例如，前四位是距离用户的

1.16

，

0.82

，

0.42

，和

5.12

英里，我希望它们在列表中排序如下：

0.42

，

0.82

，

1.16

，

5.12

您可以使用组件，步骤：

使用Harvesine公式获取位置的距离（根据需要） 已经做了）

按距离排序

将排序后的数组作为道具传递给平面列表

但是如果你根本不想把这些地方分类呢

您可以按照这个问题的答案对显示的列表进行重新排序，而无需对数据源进行排序