Question

我想构建一个与Uber类似的应用程序。事情是在react-native-maps文档中，它仅提供如何直接渲染

在我的情况下，我希望<Marker/>在onPress（）之后（单击按钮）呈现出来。如何实现？

我试图更改<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

您可以尝试以下吗？

并更改地图函数中的参数，您正在使用不在位置词典中的键。（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）添加了密钥，当您在屏幕上渲染多个标记时，需要用到它，作为警告显示

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

还更改了与initialRegion相同的标记位置，只是为了检查标记是否正在渲染，因此请检查一次，让我知道您是否仍然遇到任何错误

反应本机|单击按钮后如何渲染标记（onPress（））

2 个答案: