在我们的应用程序中,我们在登录时获取用户位置(单击登录 - >获取位置 - >在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 prop图像让它工作。此外,在MapView内渲染具有不透明度:0的虚拟MapView.Marker解决了在第一次渲染调用时出现默认标记的问题。