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英里，我希望它们在列表中排序如下：{{ 1}}，0.42，0.82，1.16。

Answer 1

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

获取地点＆＃39;使用Harvesine配方的距离（和你一样）已经做了。）。
按距离排列地点
将已排序的数组作为prop传递给FlatList

但是，如果你根本不想对这些地方进行排序，那该怎么办呢！

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

如何订购组件

1 个答案: