在 IOS 上使用道具反应本机地图可点击标记

Question

嘿，我尝试构建一个带有标记的地图，如果您单击标记，则会打开带有挑战的旋转木马。

onMarkerPressed(){
  navigation.navigate('ChallengeScreen');
}
  render(){
    const {latitude, longitude, onloading,markers } = this.state;
        return(
          <View style={styles.container}>
            <MapView
            style={styles.mapview}
            loadingEnabled={true}
            region={{
                latitude: 49.4459,//latitude,
                longitude: 7.77151, //longitude,
                latitudeDelta: 0.00722,
                longitudeDelta: 0.00421
            }}
            > 
            {markers.map( marker => {
                return(
                    <MapView.Marker
                    key={marker.id}
                    coordinate={{
                        latitude: marker.latitude,
                        longitude: marker.longitude,
                    }}
                    onPress={this.onMarkerPressed}
                    >
                    </MapView.Marker>
                )
            })}
        </MapView>
        </View>
        )
    }
  }
}

但是 OnPress 只能在没有道具的情况下工作.... 如何在 onMarkerPressed 中获取被点击的标记作为道具？

Answer 1

onMarkerPressed 应该接收按下的 marker 对象键值对属性并作为路由参数传递给 navigation.navigate('ChallengeScreen')。

onMarkerPressed = (marker)=> {

const params = {marker}
  navigation.navigate('ChallengeScreen',params);
}
  render(){
    const {latitude, longitude, onloading,markers } = this.state;
        return(
          <View style={styles.container}>
            <MapView
            style={styles.mapview}
            loadingEnabled={true}
            region={{
                latitude: 49.4459,//latitude,
                longitude: 7.77151, //longitude,
                latitudeDelta: 0.00722,
                longitudeDelta: 0.00421
            }}
            > 
            {markers.map(marker => {
                return(
                    <MapView.Marker
                    key={marker.id}
                    coordinate={{
                        latitude: marker.latitude,
                        longitude: marker.longitude,
                    }}
                    onPress={()=>this.onMarkerPressed(marker)}
                    >
                    </MapView.Marker>
                )
            })}
        </MapView>
        </View>
        )
    }
  }

注： onMarkerPressed改为箭头函数，避免函数与组件绑定class.

查看 React Navigation passing parameters to routes 以获取详细指南。

在 IOS 上使用道具反应本机地图可点击标记

React Native Map clickable Markers with props on IOS

reactjs

react-native

expo

react-native-maps