推荐使用MapLibre GL SDK for React Native：打造下一代地图应用的开源利器

import React, { useRef, useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';
 
// 初始化MapLibre GL SDK
MapboxGL.setAccessToken('your_mapbox_access_token');
 
export default function MapView({ styleURL = 'mapbox://styles/mapbox/streets-v11' }) {
  // 创建地图视图引用
  const mapView = useRef(null);
 
  // 使用useEffect以避免在每次渲染时都进行地图初始化
  useEffect(() => {
    const showUserLocation = async () => {
      if (mapView.current) {
        const camera = await mapView.current.getCamera();
        camera.zoomLevel = camera.zoomLevel + 1;
        await mapView.current.setCamera(camera.makeView(), 1000);
      }
    };
 
    showUserLocation();
  }, []);
 
  return (
    <View style={styles.container}>
      // 渲染地图组件
      <MapboxGL.MapView
        style={styles.mapView}
        styleURL={styleURL}
        ref={mapView}
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  mapView: {
    flex: 1,
  },
});

这段代码展示了如何在React Native应用中集成MapLibre GL SDK来创建一个简单的地图视图。首先，我们导入了必要的React和React Native组件，并从@react-native-mapbox-gl/maps导入了MapboxGL。然后，我们设置了MapLibre GL SDK的访问令牌，并定义了一个函数组件MapView，它使用了useRef来创建地图视图的引用。我们使用了useEffect来初始化地图，并设置了地图的URL样式。最后，我们使用了一个<MapboxGL.MapView />组件来渲染地图，并将其放置在一个View组件中以确保它填充整个屏幕。