一些自定义标记不会出现在 Android react-native-maps 上

Question

In our app, we are obtaining the user location when he logs in (click login -> get location -> save location in redux -> navigate to home screen). When the Home component mounts, it should use the location to get data from the area around the user.

In iOS, all markers render correctly but in Android devices, not all markers are rendered, only some of them (and oddly enough all of them are image1 or image2).

It is only when we call the getDataFromRegion function again that all markers render correctly. Any idea of what we are doing wrong?

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>
         )
     }
}

Answer 1

It seems like removing the Image component and use the MapView.Marker prop image got it working. Also, rendering a dummy MapView.Marker with opacity: 0 inside the MapView solved the problem of appearing the default markers at the first render call.