react-native-hms-maps map 为空白

Question

I have a react native app that I am currently trying to make compliant with Huawei's HMS APK so that users with Mate 30 or P40 devices can use our app.

I have removed react-native-maps for this release and I have replaced it with react-native-hms-maps by following the instructions found in the Huawei HMS Core Developer Guides for React-Native.

When I run the app, and I navigate to the screen where I am rendering the map, only a blank page shows. Upon running the app with the logcats running, I was able to pin point this error in the logs:

2020-09-01 23:23:27 23608-23608/? I/MapRender: ERROR MapView.cpp:296: MapView::[SwitchMapType] enter!

I don't know if this is related to my problem.

My react-native code looks like this:

import HMSMap from 'react-native-hms-map';

...other code....

render = () => {
  const address = this.state.address;

  return (
   <View style={styles.container}>
    <HMSMap
      style={styles.map}
      initialRegion={{
        latitude: 37.78825,
        longitude:  -122.4324,
        latitudeDelta:  0.0922,
        longitudeDelta:  0.0421,
      }}
    />
   </View>
  );
 };

And my style object looks like this:

 container: {
  ...StyleSheet.absoluteFillObject,
  justifyContent: 'flex-end',
  alignItems: 'center',
  borderColor: 'black',
  borderWidth: 2
 },
 map: {
  ...StyleSheet.absoluteFillObject
 }

Any idea what I could be doing wrong?

Answer 1

You are using the old version of React Native Map Plugin 4.0.2, and it will be placed offline after July 30, 2020, which causes this issue.

A note is added on “ Version Change History ” part on documentation, please kindly refer to it.

Answer 2

You can refer the article HMS Map Kit Elucidated: Using React Native to know about how to integrate HMS Map in React Native.