反应本机 |单击按钮（ onPress() ）后如何呈现标记

Question

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

在我的例子中，我希望 <Marker/> 在 onPress()（单击按钮）之后呈现如何实现？

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

构造函数：

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,
                    }
                },
            ]
        })
    }

地图视图：

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

你能试试下面的方法吗？

并更改地图函数中的参数，您使用的键不在位置字典中。（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/>
}

Answer 2

你的代码有两个小改动，它是我的渲染标记

_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) 添加了Key，在屏幕上渲染多个标记时需要，显示为警告

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

还更改了与 initialRegion 相同的标记位置，只是为了检查标记是否正在渲染，所以请检查一次，如果您仍然收到任何错误，请告诉我

反应本机 |单击按钮（ onPress() ）后如何呈现标记

React Native | How to render Markers after click on Button ( onPress() )

javascript

android

react-native

react-native-maps