Некоторые пользовательские маркеры не отображаются на Android-native-картах реакции

1

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

1 ответ

0

Это похоже на удаление компонента Image и использование пропеллера MapView.Marker. Кроме того, рендеринг фиктивного MapView.Marker с непрозрачностью: 0 внутри MapView решил проблему появления маркеров по умолчанию при первом вызове рендеринга.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню