在 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 中获得点击的 Marker 作为 Prop ？

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 改为箭头函数以避免函数与组件类绑定。

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