Expo中使用OpenStreetMap瓦片时React Native Maps显示空白地图

排查方向与解决方案 #

• 改用HTTPS协议：OpenStreetMap公共瓦片服务器已默认启用HTTPS，HTTP请求可能被系统或Expo安全策略拦截。将UrlTile的urlTemplate改为：

  https://tile.openstreetmap.org/{z}/{x}/{y}.png
  

• 移除自定义地图样式干扰：当前代码中设置的customMapStyle可能覆盖瓦片图层显示，先注释该属性测试瓦片是否能正常加载。

• 检查Google Provider兼容性：使用PROVIDER_GOOGLE时，第三方瓦片图层的渲染可能存在兼容问题。可尝试移除provider属性，使用react-native-maps默认提供商（平台自动适配Mapbox或Apple Maps）测试。

• 确认网络权限配置：确保Expo应用已配置必要网络权限：

  • 在app.json的ios.infoPlist中添加（若需兼容HTTP，优先推荐HTTPS）：

    "NSAppTransportSecurity": {
      "NSAllowsArbitraryLoads": true
    }
    

  • 在app.json的android.permissions中添加：

    "permissions": ["ACCESS_NETWORK_STATE", "INTERNET"]
    

• 验证瓦片URL有效性：直接在浏览器中打开瓦片URL（例如https://tile.openstreetmap.org/10/512/341.png），确认图片能正常加载，排除瓦片服务器故障。

修改后的代码示例 #

<MapView
    ref={map}
    style={styles.map}
    // 先注释自定义样式，测试瓦片加载
    // customMapStyle={colorMode === "dark" ? mapThemes.dark : mapThemes.light}
    showsUserLocation={true}
    showsMyLocationButton={false}
    followsUserLocation={true}
    showsCompass={false}
    showsTraffic={false}
    onPanDrag={() => {
        setFollowUser(false);
    }}
    onUserLocationChange={(location) => {
        if (followUser) {
            map?.current.animateCamera({
                center: {
                    latitude: location.nativeEvent.coordinate?.latitude || 0,
                    longitude: location.nativeEvent.coordinate?.longitude || 0,
                },
                heading: location.nativeEvent.coordinate?.heading,
                pitch: 25,
                zoom: 18,
            });
        }

        setLine([...line, location.nativeEvent.coordinate]);
    }}
    // 可尝试移除provider属性，使用默认提供商
    // provider={PROVIDER_GOOGLE}
    mapType={MAP_TYPES.NONE}
>
    <UrlTile urlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png" zIndex={1} />
    {/* <Polyline coordinates={line} strokeColor="#F00" strokeWidth={6} /> */}
</MapView>

内容的提问来源于stack exchange，提问作者Lucas Gardini Dias