React-Native-Maps在安卓模拟器/真机中无法显示问题排查求助

问题解决步骤 #

1. 修复MapView样式属性拼写错误
   你当前Maps.js中的MapView组件样式属性写错了，React Native组件样式统一使用style属性，你误写为styles，导致地图组件没有获取到宽高配置，完全无法渲染。
   修改代码如下：

// 错误写法
<MapView
  styles={styles.map}
  // 其他属性
/>

// 正确写法
<MapView
  style={styles.map}
  provider={PROVIDER_GOOGLE}
  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
/>

修改后重新编译项目，90%以上概率可以解决空白问题。

2. 移除多余的手动链接配置
   你使用的React Native 0.64.2版本支持原生模块自动链接，不需要手动在settings.gradle中添加react-native-maps的链接配置，多余配置可能会导致模块加载冲突：
   删除settings.gradle中的以下两行代码：

include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')

之后执行缓存清理操作重新编译：

# 清理安卓构建缓存
cd android && ./gradlew clean && cd ..
# 清理RN打包缓存
npx react-native start --reset-cache
# 重新运行项目
npx react-native run-android

3. 补充安卓权限配置
   确认AndroidManifest.xml中已添加地图运行必需的权限，权限声明需要放在<manifest>标签下、<application>标签外：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

4. 验证地图初始化状态
   可以给MapView添加onMapReady回调，确认地图是否正常完成初始化：

<MapView
  style={styles.map}
  provider={PROVIDER_GOOGLE}
  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
  onMapReady={() => console.log('地图初始化完成')}
/>

如果控制台能输出对应日志，说明地图逻辑加载正常，只需要排查样式渲染相关问题即可。

内容的提问来源于stack exchange，提问作者AKHIL BELLAM