В нашем приложении мы получаем местоположение пользователя, когда он входит в систему (нажмите «Войти» -> «Получить местоположение» -> «Сохранить местоположение в формате 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>
)
}
}