Nanoprogrammed Penultimate Musicianship

    react-native-amap-navi
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    react-native-amap-navi

    npm version npm version 高德地图导航库,react-native双平台,支持一键api调用和自定义view调用

    Getting started

    $ npm install react-native-amap-navi --save

    Mostly automatic installation

    $ react-native link react-native-amap-navi

    Manual installation

    iOS

    需要使用CocoaPods,在Podfile文件中加入(正常情况下,执行上面的link是会自动加入的)

    pod 'react-native-amap-navi', path: '../node_modules/react-native-amap-navi'
    

    然后运行:(由于依赖的库比较多,比较慢)

    pod install
    

    注意:如果同时安装了react-native-amap3d库,pod install的时候可能会报下面的错

    需要找到react-native-amap3d中的react-native-amap3d.podspec文件,

    s.dependency 'AMap3DMap', "~> 6.7.0"  //该处的版本从6.6.0改为6.7.0
    

    详细可以直接按照官网教程:

    https://lbs.amap.com/api/ios-navi-sdk/guide/create-project/cocoapods

    Android

    1. Open up android/app/src/main/java/[...]/MainActivity.java
    • Add import com.reactlibrary.RNReactNativeAmapNaviPackage; to the imports at the top of the file
    • Add new RNReactNativeAmapNaviPackage() to the list returned by the getPackages() method
    1. Append the following lines to android/settings.gradle:
      include ':react-native-amap-navi'
      project(':react-native-amap-navi').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-amap-navi/android')
      
    2. Insert the following lines inside the dependencies block in android/app/build.gradle:
        compile project(':react-native-amap-navi')
      

    注意:
    如果同时使用了react-native-amap3d库,需要将该库中的sdk排除掉,否则编译会报错

    implementation (project(':react-native-amap3d')) {
            exclude group:'com.amap.api',module:'3dmap'
        }
    

    Usage

    1.api调用方式

    高德导航sdk集成了一套默认的导航界面,包括路径规划和导航,无法定制UI,如无特殊需求,可以直接调用该api进行导航

    具体介绍:

    https://lbs.amap.com/api/android-navi-sdk/guide/navi-component/use-navi-component

    import AmapNavi, { AmapNaviType, AMapNaviView } from "react-native-amap-navi";
     
    //points数组分下面两个情况:
    //1.只有一个元素,表示终点,起点会默认为当前定位位置
    //2.大于等于两个元素,头尾分别为起点和终点,中间的为经过的点,经过点最多3个
     
    AmapNavi.showRouteActivity([{
                            name: '北京站',
                            latitude: 0.0,
                            longitude: 0.0
                          }],AmapNaviType.DRIVER);

    2.自定义view

    如果需要在导航界面上面自定义RN组件,可以使用导出的组件,具体的属性,查看index.d.ts

    import AmapNavi, { AmapNaviType, AMapNaviView, NaviInfo, AmapNaviMode, AMapNaviDrivingStrategy } from "react-native-amap-navi";
     
    ...
    //points跟api调用不一样,必须最少传递2个元素,所以如果需要当前位置,需要自己手动获取
    ...
     
    componentDidMount() {
        //延迟一段时间导航,防止出现组件未初始化
        setTimeout(()=>{
          //开始路径规划,默认速度优先,points最少两个元素(前后分别是起点和终点,中间的为途经点),否则不会有任何回调
          this.mapNaviView.calculateRoute(this.props.points||[],AMapNaviDrivingStrategy.AMapNaviDrivingStrategySingleDefault);
        },500);
      }
     
    <AMapNaviView
              style={{flex:1}}
              ref={ref=>this.mapNaviView = ref}
              autoLockCar={true}
              onCalculateRouteSuccess={result=>{
                //路径规划成功后,开始导航
                this.mapNaviView.startNavi(AmapNaviMode.EMULATOR);
              }}
            />

    ios:

    ios

    android:

    android

    Install

    npm i react-native-amap-navi

    DownloadsWeekly Downloads

    4

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    1.23 MB

    Total Files

    29

    Last publish

    Collaborators

    • yz1311