{"_id":"@cniot/react-native-amap-navi-pad","_rev":"4-aaebae5550463ca064a93c1b6d937635","name":"@cniot/react-native-amap-navi-pad","dist-tags":{"latest":"0.2.4-beta.1"},"versions":{"0.2.4-beta.1":{"name":"@cniot/react-native-amap-navi-pad","version":"0.2.4-beta.1","keywords":[],"author":{"name":"yz1311"},"license":"MIT","_id":"@cniot/react-native-amap-navi-pad@0.2.4-beta.1","maintainers":[{"name":"ruowen","email":"2862923335@qq.com"},{"name":"hxuena","email":"1345295079@qq.com"},{"name":"lanjian.yj","email":"lanjian.yj@alibaba-inc.com"},{"name":"qige.yzx","email":"qige.yzx@alibaba-inc.com"},{"name":"mingnan.wmn","email":"mingnan.wmn@cainiao.com"},{"name":"xiaobc","email":"527710279@qq.com"},{"name":"wangyuhao.wyh","email":"emailofwyh@foxmail.com"},{"name":"rio7","email":"rio7@qq.com"},{"name":"wukidy","email":"1650801633@qq.com"},{"name":"jun.lu","email":"idche@qq.com"},{"name":"zhouhuan","email":"zhouhuan0910@163.com"}],"homepage":"https://github.com/yz1311/react-native-amap-navi#readme","bugs":{"url":"https://github.com/yz1311/react-native-amap-navi/issues"},"dist":{"shasum":"78f5c98df04aafdcfa6dc642fabe02662027cca9","tarball":"https://registry.npmjs.org/@cniot/react-native-amap-navi-pad/-/react-native-amap-navi-pad-0.2.4-beta.1.tgz","fileCount":30,"integrity":"sha512-xvuz9LTPjs/kF8TUmXE3Ugq6XTva1QaalLG+JNlEL5CrJ1WLEhMfFWMnIkM1Jlap5gPpoQ7k0Qm8YsQf9kiBLQ==","signatures":[{"sig":"MEQCIGRpDmtGwSmJAA1SbOO2jyDAxBSkOKjuvD0/J8Jbsw8bAiB1UQVipJbmhVYwakK9GssGBnXuIT3aQxcwq/m2s+b3JA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1230790},"main":"index.js","types":"./index.d.ts","gitHead":"971618c5fc52b395c104ed90c8461efb51dcbd3c","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"xiaobc","email":"527710279@qq.com"},"repository":{"url":"git+https://github.com/yz1311/react-native-amap-navi.git","type":"git"},"_npmVersion":"8.5.5","description":"amap navi for react-native","directories":{},"_nodeVersion":"16.15.0","_hasShrinkwrap":false,"peerDependencies":{"react-native":"^0.60"},"_npmOperationalInternal":{"tmp":"tmp/react-native-amap-navi-pad_0.2.4-beta.1_1726285241590_0.09905518142104963","host":"s3://npm-registry-packages"}}},"time":{"created":"2024-09-14T03:40:41.489Z","modified":"2025-07-30T07:44:20.633Z","0.2.4-beta.1":"2024-09-14T03:40:41.880Z"},"bugs":{"url":"https://github.com/yz1311/react-native-amap-navi/issues"},"author":{"name":"yz1311"},"license":"MIT","homepage":"https://github.com/yz1311/react-native-amap-navi#readme","keywords":[],"repository":{"url":"git+https://github.com/yz1311/react-native-amap-navi.git","type":"git"},"description":"amap navi for react-native","maintainers":[{"email":"qige.yzx@alibaba-inc.com","name":"qige.yzx"},{"email":"rio7@qq.com","name":"rio7"},{"email":"1650801633@qq.com","name":"wukidy"},{"email":"2862923335@qq.com","name":"ruowen"},{"email":"yangjian_666@qq.com","name":"lanjian.yj"},{"email":"idche@qq.com","name":"jun.lu"},{"email":"zhouhuan0910@163.com","name":"zhouhuan"},{"email":"1345295079@qq.com","name":"hxuena"},{"email":"emailofwyh@foxmail.com","name":"wangyuhao.wyh"},{"email":"527710279@qq.com","name":"xiaobc"},{"email":"mingnan.wmn@cainiao.com","name":"mingnan.wmn"},{"email":"syf01708115@cainiao.com","name":"shiyifan"},{"email":"1402807833@qq.com","name":"kangxin"},{"email":"wangzhenzhuo.wzz@cainiao.com","name":"yongcheng716"}],"readme":"\n# @cniot/react-native-amap-navi-pad\n\n相比 @cniot/react-native-amap-navi 锁定了android导航为横屏展示\n\n# react-native-amap-navi\n[![npm version](http://img.shields.io/npm/v/react-native-amap-navi.svg?style=flat-square)](https://npmjs.org/package/react-native-amap-navi \"View this project on npm\")\n[![npm version](http://img.shields.io/npm/dm/react-native-amap-navi.svg?style=flat-square)](https://npmjs.org/package/react-native-amap-navi \"View this project on npm\")\n高德地图导航库,react-native双平台,支持一键api调用和自定义view调用\n## Getting started\n\n`$ npm install react-native-amap-navi --save`\n\n### Mostly automatic installation\n\n`$ react-native link react-native-amap-navi`\n\n### Manual installation\n\n\n#### iOS\n需要使用CocoaPods,在Podfile文件中加入(正常情况下，执行上面的link是会自动加入的)\n\n```\npod 'react-native-amap-navi', path: '../node_modules/react-native-amap-navi'\n```\n\n然后运行:(由于依赖的库比较多，比较慢)\n\n```\npod install\n```\n\n注意:如果同时安装了`react-native-amap3d`库，`pod install`的时候可能会报下面的错\n![](https://tva1.sinaimg.cn/large/006tNbRwgy1g9n43ndfgvj30nt04a3yv.jpg)\n\n需要找到`react-native-amap3d`中的`react-native-amap3d.podspec`文件，\n\n```\ns.dependency 'AMap3DMap', \"~> 6.7.0\"  //该处的版本从6.6.0改为6.7.0\n```\n\n详细可以直接按照官网教程:\n\nhttps://lbs.amap.com/api/ios-navi-sdk/guide/create-project/cocoapods\n\n#### Android\n\n1. Open up `android/app/src/main/java/[...]/MainActivity.java`\n  - Add `import com.reactlibrary.RNReactNativeAmapNaviPackage;` to the imports at the top of the file\n  - Add `new RNReactNativeAmapNaviPackage()` to the list returned by the `getPackages()` method\n2. Append the following lines to `android/settings.gradle`:\n  \t```\n  \tinclude ':react-native-amap-navi'\n  \tproject(':react-native-amap-navi').projectDir = new File(rootProject.projectDir, \t'../node_modules/react-native-amap-navi/android')\n  \t```\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n  \t```\n      compile project(':react-native-amap-navi')\n  \t```\n\n\n注意:  \n如果同时使用了react-native-amap3d库，需要将该库中的sdk排除掉,否则编译会报错\n```\nimplementation (project(':react-native-amap3d')) {\n        exclude group:'com.amap.api',module:'3dmap'\n    }\n```\n\n\n## Usage\n\n#### 1.api调用方式\n高德导航sdk集成了一套默认的导航界面，包括路径规划和导航，无法定制UI，如无特殊需求，可以直接调用该api进行导航\n\n具体介绍:\n\nhttps://lbs.amap.com/api/android-navi-sdk/guide/navi-component/use-navi-component\n\n```javascript\nimport AmapNavi, { AmapNaviType, AMapNaviView } from \"react-native-amap-navi\";\n\n//points数组分下面两个情况:\n//1.只有一个元素，表示终点，起点会默认为当前定位位置\n//2.大于等于两个元素，头尾分别为起点和终点，中间的为经过的点，经过点最多3个\n\nAmapNavi.showRouteActivity([{\n                        name: '北京站',\n                        latitude: 0.0,\n                        longitude: 0.0\n                      }],AmapNaviType.DRIVER, \"requestId\");\n```\n\n#### 2.自定义view\n\n如果需要在导航界面上面自定义RN组件，可以使用导出的组件,具体的属性，查看[index.d.ts](https://github.com/yz1311/react-native-amap-navi/blob/master/index.d.ts)\n\n\n```javascript\nimport AmapNavi, { AmapNaviType, AMapNaviView, NaviInfo, AmapNaviMode, AMapNaviDrivingStrategy } from \"react-native-amap-navi\";\n\n...\n//points跟api调用不一样，必须最少传递2个元素，所以如果需要当前位置，需要自己手动获取\n...\n\ncomponentDidMount() {\n    //延迟一段时间导航，防止出现组件未初始化\n    setTimeout(()=>{\n      //开始路径规划,默认速度优先,points最少两个元素(前后分别是起点和终点，中间的为途经点),否则不会有任何回调\n      this.mapNaviView.calculateRoute(this.props.points||[],AMapNaviDrivingStrategy.AMapNaviDrivingStrategySingleDefault);\n    },500);\n  }\n\n<AMapNaviView\n          style={{flex:1}}\n          ref={ref=>this.mapNaviView = ref}\n          autoLockCar={true}\n          onCalculateRouteSuccess={result=>{\n            //路径规划成功后，开始导航\n            this.mapNaviView.startNavi(AmapNaviMode.EMULATOR);\n          }}\n        />\n```\n\nios:\n\n![ios](https://tva1.sinaimg.cn/large/006tNbRwgy1g9n474kyuyj30bi0l2tel.jpg)\n\nandroid:\n\n![android](https://tva1.sinaimg.cn/large/006tNbRwgy1g9n478bbqvj30u01hc7r4.jpg)","readmeFilename":"README.md"}