android - React-Native 自定义标记减慢应用程序

Question

当我使用自定义标记时，经过几个进程后系统开始变得沉重。但是如果我没有定制就使用它，是没有问题的。我分享了我的 Marker 代码的截图，为什么我可能会遇到这样的问题。

所以如果我使用默认标记也没关系。但如果我自己设计它，它的工作速度会非常慢。

标记数量：50

库：react-native-maps、react-native-vector-icons/FontAwesome5

关：

tracksViewChanges={false}我通过向标记添加道具解决了这个问题

trackViewChanges：设置此标记是否应跟踪视图更改。建议在可能提高自定义标记性能时将其关闭。

renderListMarker = () => {
    let { markerList } = this.props;
    return (
        markerList.map((item, index) => {
            return (
                <Marker
                    onPress={() => { this.selectMarker(index) }}
                    key={item._id}
                    coordinate={{
                        latitude: item.location.coordinates[0],
                        longitude: item.location.coordinates[1],
                    }}
                >
                    <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                        <View style={{ marginBottom: -18, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                            <View style={{ marginEnd: 2 }}>
                                <FontAwesome5 name="parking" size={24} color={this.state.marker === index ? "#3879f0" : "#000000"} />
                            </View>
                            {
                                item.empty !== false ? <View style={{ padding: 2, borderRadius: 2, backgroundColor: item.empty > 0 ? '#00cc96' : '#e63946', }}>
                                    <Text style={{ color: '#ffffff', fontWeight: 'bold', fontSize: 12 }}>{item.empty}</Text>
                                </View> : null
                            }
                        </View>
                        <View style={{ justifyContent: 'center' }}>
                            <FontAwesome5 name="sort-down" size={30} color={this.state.marker === index ? "#3879f0" : "#000000"} />
                        </View>
                    </View>

                </Marker>
            )
        }
        )
    )
}

在此处输入图像描述

标签： androidreactjsreact-nativegoogle-mapsgoogle-maps-markers