如何订购组件

Question

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

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>
        );
    }
}

Place.js

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

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

我已经缩短了代码，它正在工作。该列表显示了我与用户的正确距离的所有地点。我只是不确定从哪里开始订购组件。我对本机反应很新！例如，前四个位置是1.16、0.82、0.42 和5.12 距离用户英里，我希望它们在列表中排序为：0.42、0.82、@987654329 @, 5.12.

Answer 1

你可以使用FLatList组件，步骤：

1. 使用 Harvesine 公式获取地点的距离（当您 已经这样做了）。
2. 按距离对地点进行排序
3. 将排序后的数组作为道具传递给 FlatList

但是，如果您根本不想对地点进行排序怎么办！

您可以按照this question 的回答来重新排序显示的列表而不对数据源进行排序。