[英]React Native Maps: Markers image doesn't show using Custom Marker in react-native-maps
[英]Some custom markers do not appear on Android react-native-maps
在我們的應用程序中,我們在用戶登錄時獲取用戶位置(單擊登錄 -> 獲取位置 -> 在 redux 中保存位置 -> 導航到主屏幕)。 當 Home 組件掛載時,它應該使用位置從用戶周圍的區域獲取數據。
在 iOS 中,所有標記都能正確渲染,但在 Android 設備中,並非所有標記都被渲染,只有其中一些(奇怪的是,所有標記都是 image1 或 image2)。
只有當我們再次調用getDataFromRegion函數時,所有標記才能正確呈現。 知道我們做錯了什么嗎?
class Login extends Component {
handleLogin = (u, p) => {
getLocation(location => {
let region = {
latitude: location.coords.latitude,
longitude: location.coords.longitude,
latitudeDelta: 0.06,
longitudeDelta: 0.06
}
/* save location in redux */
this.props.setLocation(region)
login(u, p).then(() => _gotoHome())
})
}
}
class Home extends Component {
componentWillMount() {
if(this.props.location !== undefined) {
initialRegion = {
latitude: this.props.location.latitude,
longitude: this.props.location.longitude,
latitudeDelta: 0.06,
longitudeDelta: 0.06
}
}
}
componentDidMount() {
/* set data in redux */
this.getDataFromRegion(initialRegion)
}
render() {
this.props.data.map((data, index) => data.visible ? <CustomMarker key={index} data={data}/> : null)
}
}
class CustomMarker extends Component {
render() {
const {data} = this.props
const coords = { latitude: data.lat, longitude: data.lng }
return (
<MapView.Marker
coordinate={coords}
onLoad={() => this.forceUpdate()}
tracksViewChanges={Platform.OS === 'android' ? false : true}
>
<Image
onLoad={() => this.forceUpdate()}
source={data.a === '0' ? image1 : image2}
style={{width: 60, height: 60}}
/>
</MapView.Marker>
)
}
}
似乎刪除 Image 組件並使用 MapView.Marker 道具圖像讓它工作。 此外,在 MapView 中渲染一個帶有opacity: 0的虛擬 MapView.Marker 解決了在第一次渲染調用時出現默認標記的問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.