嘿，我嘗試構建一個帶有標記的地圖，如果您單擊標記，則會打開帶有挑戰的旋轉木馬。
onMarkerPressed(){
navigation.navigate('ChallengeScreen');
}
render(){
const {latitude, longitude, onl oading,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 中將點擊的標記作為道具？
uj5u.com熱心網友回復：
onMarkerPressed應該接收按下的marker物件鍵值對屬性并傳遞給navigation.navigate('ChallengeScreen')作為路由引數。
onMarkerPressed = (marker)=> {
const params = {marker}
navigation.navigate('ChallengeScreen',params);
}
render(){
const {latitude, longitude, onl oading,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將引數傳遞給路由以獲得深入指南。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/402349.html
標籤：