探索智能导航：React Native Mapbox 导航库

import React from 'react';
import MapView, { Marker } from 'react-native-mapbox-gl';
 
MapView.setAccessToken('YOUR_MAPBOX_ACCESS_TOKEN', 'navigation');
 
class MapNavigationExample extends React.Component {
  state = {
    origin: [-122.4205, 37.774], // 起点经纬度
    destination: [-122.42039, 37.77492], // 终点经纬度
    route: null, // 路线路径
  };
 
  async getRoute() {
    try {
      const route = await MapboxNavigation.getRoute({
        origin: this.state.origin,
        destination: this.state.destination,
        // 其他路线规划参数...
      });
      this.setState({ route });
    } catch (error) {
      console.error(error);
    }
  }
 
  render() {
    return (
      <MapView style={{ flex: 1 }}>
        {this.state.route && (
          <MapView.Polyline
            points={this.state.route.coordinates}
            width={8}
            strokeColor="#0094ff"
          />
        )}
        {/* 在地图上设置起点和终点标记 */}
        <Marker coordinate={this.state.origin} />
        <Marker coordinate={this.state.destination} />
      </MapView>
    );
  }
}
 
export default MapNavigationExample;

这个代码示例展示了如何使用React Native Mapbox GL库和Mapbox Navigation SDK来获取路线并在地图上显示。首先，设置了Mapbox的访问令牌，然后定义了一个组件，该组件在状态中存储了起点和终点的经纬度，并提供了一个异步函数getRoute来获取路线。在render方法中，它渲染了地图，并且如果路线状态已经获取，它将渲染路线的路径。最后，它在地图上设置了起点和终点标记。