React Native Expo集成Mapbox触发setAccessToken警告致地图白屏

@rnmapbox/maps v10及以上版本默认基于MapLibre内核渲染，仅调用setAccessToken方法时未明确指定瓦片服务提供商，库无法完成地图服务初始化，直接触发警告、MapView渲染失败白屏。同时原代码中根容器的居中样式属性会挤压MapView的布局空间，进一步加剧渲染异常。

• 初始化配置补全：在调用setAccessToken前，先执行setWellKnownTileServer指定所用瓦片服务类型：
  • 使用官方Mapbox服务时传参'Mapbox'
  • 使用MapLibre兼容的第三方/自建瓦片服务（如OpenStreetMap、自定义国内地图瓦片）时传参'MapLibre'
• 修正布局样式：删除根容器page样式中的justifyContent: 'center'、alignItems: 'center'属性，保证MapView组件可正常撑满可用布局空间
• Expo项目同步原生依赖：配置修改完成后执行npx expo prebuild --clean，重新构建原生工程后再启动项目即可

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View } from 'react-native';
import MapboxGL from '@rnmapbox/maps';

// 注意顺序：先指定瓦片服务，再设置访问令牌
MapboxGL.setWellKnownTileServer('Mapbox');
// 替换为你自己的有效Mapbox访问令牌，使用MapLibre服务时可根据服务要求配置token或省略该步骤
MapboxGL.setAccessToken('YOUR_VALID_MAPBOX_TOKEN');

export default function App() {
  return (
    <View style={styles.page}>
      <MapboxGL.MapView style={styles.map} />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  page: {
    flex: 1,
    backgroundColor: '#F5FCFF'
  },
  map: {
    flex: 1
  }
});

补充说明：如果使用MapLibre类第三方瓦片服务，不需要申请Mapbox官方token，后续在MapView组件中配置对应瓦片源地址即可正常加载地图。

内容的提问来源于stack exchange，提问作者SR JOY