React Native |单击Button（onPress（））后如何渲染标记

Question

我想构建一个类似优步的应用程序。问题在于react-native-maps文档，它只提供了如何直接渲染

在我的情况下，我希望在onPress（）之后渲染<Marker/>（点击一个按钮）如何实现这一点？

我试图改变<Marker/>内部使用的<MapView>组件的状态，但似乎没有重新渲染

构造函数：

constructor(props) {
        super(props)
        this.state = {
            updatesEnabled: false,
            location: {},
            modalCategoryVisible: false,
            markers: []
        }
    }

onPress句柄：

_searchStreetVendors = () => {
        this.setState({
            markers: [
                {
                    merchant_name: "Zaky",
                    merchant_type: "Sate",
                    merchant_info: "Selling Sate that is tasty",
                    merchant_phone: "0812909281234",
                    location: {
                        latitude: -6.667772,
                        longitude: 106.723630,
                    }
                },
            ]
        })
    }

MapView类：

render() {
        return (
            <View style={styles.container}>
                <MapView
                    style={styles.map}
                    provider={PROVIDER_GOOGLE}
                    ref={(mapView) => { _mapView = mapView; }}
                    initialRegion={{
                        latitude: -6.174969,
                        longitude: 106.827202,
                        latitudeDelta: LATITUDE_DELTA,
                        longitudeDelta: LONGITUDE_DELTA,
                    }}>
                    {this.state.markers.map(marker => (
                        <MapViewMarker
                            coordinate={marker.location}
                            title={marker.title}
                            description={marker.description}
                        />
                    ))}
                </MapView>
                ...
             <View/>
}

Answer 1

代码中的两个小变化，它是我的渲染标记

_searchStreetVendors = () => {
    this.setState({
        markers: [
            {
                merchant_name: "Zaky",
                merchant_type: "Sate",
                merchant_info: "Selling Sate that is tasty",
                merchant_phone: "0812909281234",
                key: 1,
                location: {
                    latitude: -6.174969,
                    longitude: 106.827202,
                }
            },
        ]
    })
}

<MapView
    style={styles.map}
    provider={PROVIDER_GOOGLE}
    ref={(mapView) => { _mapView = mapView; }}
    initialRegion={{
        latitude: -6.174969,
        longitude: 106.827202,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
    }}>
    {this.state.markers.map(marker => (
        <MapView.Marker
            coordinate={marker.location}
            title={marker.title}
            description={marker.description}
            key={marker.key}
        />
    ))}
</MapView>

1）添加了键，当您在屏幕上呈现多个标记时需要，这显示为警告

2）MapView.Maker，我发现文本之间没有点给我一个错误

也改变了标记位置和initialRegion一样，只是为了检查标记是否正在渲染，所以检查一次，让我知道你是否还有任何错误

Answer 2

你能试试以下吗？

并且更改map函数中的参数，您使用的是不在位置字典中的键。（marker.title和marker.description不在字典中）

renderMarkers() {
    return this.state.markers.map((marker) => {
      return (
        <MapViewMarker
            coordinate={marker.location}
            title={marker.merchant_name}
            description={marker. merchant_info}
        />
      )
    })
}

render() {
        return (
            <View style={styles.container}>
                <MapView
                    style={styles.map}
                    provider={PROVIDER_GOOGLE}
                    ref={(mapView) => { _mapView = mapView; }}
                    initialRegion={{
                        latitude: -6.174969,
                        longitude: 106.827202,
                        latitudeDelta: LATITUDE_DELTA,
                        longitudeDelta: LONGITUDE_DELTA,
                    }}>
                    {this.state.markers.length > 0 ? this.renderMarkers() : null}
                </MapView>
                ...
             <View/>
}