react-native-open-navi

运行示例

解压示例,在MyProject文件夹下运行:

npm i
npm i ../react-native-open-navi

然后以正常方式打开iOS或安卓工程运行即可.

安装

首先安装rnpm

npm install -g rnpm

推荐通过npm安装,譬如解压本文件夹到../react-native-open-navi,则可以在项目文件下运行

npm install ../react-native-open-navi
rnpm link react-native-open-navi

此时应看到输出

rnpm-link info Linking react-native-open-navi ios dependency
rnpm-link info iOS module react-native-open-navi has been successfully linked

为成功

另外为了兼容iOS 9.0以上设备,还需在Xcode中修改Info.plist

以文本方式打开,增加以下内容:

    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>baidumap</string>
        <string>comgooglemaps</string>
        <string>iosamap</string>
    </array>

或者在Xcode中打开Info.plist,增加类型为Array的项LSApplicationQueriesSchemes,并在其下增加String类型的三个项:baidumap,comgooglemaps,iosamap

API

const naviTypes : Array

一个数组,本插件支持的所有导航类型.在iOS上有百度地图,高德地图,谷歌地图,苹果地图,在安卓上有百度地图,高德地图,谷歌地图

其每一项有如下字段:

• id 对应导航的标识,为baidu, amap, google, apple 中的一个
• name 对应导航的中文名

getValidNaviTypes() => Promise

获取所有可用的导航类型,目前支持百度地图,高德地图,谷歌地图,苹果地图,如果设备安装了对应的应用,就会有对应的项目

Promise的结果是一个数组,其每一项在naviTypes里都可以找到

如果应用启动后安装了对应的地图,再次调用本函数也会返回不同的结果

openNavi(id, start, end) => Promise

• id 上一个请求所返回的id,也可以传递getValidNaviTypes()返回数组中的一项
• start 起点
• end 终点

起点和终点均为如下结构:

• longitude 经度
• latitude 纬度
• name 名字

从定位API可以获得当前的位置. 为兼容所有导航应用,起始位置必传

checkNaviTypes(type) => Promise

检查是否支持某类型的地图,type需是naviTypes数组中的一项.

返回的Promise包含一个boolean结果,表示该类型地图是否被支持.

示例

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';
 
import { getValidNaviTypes, openNavi } from 'react-native-open-navi';
 
class MyProject extends Component {
  state = {validTypes: []};
  async componentWillMount() {
    const {coords} = await new Promise((resolve, reject)=>navigator.geolocation.getCurrentPosition(resolve, reject))
 
    this.setState({
      curr: {...coords, name:'当前位置'},
      
      // 这里获取有效导航类型
      validTypes: await getValidNaviTypes(),
    });
  }
 
  render() {
    return (
      <View style={styles.container}>
        {this.state.validTypes.map(v=>(
          <Text style={styles.welcome} key={v.id} 
            onPress={()=>openNavi(v, this.state.curr, {name:'北京', longitude: 116.38517	, latitude: 39.870965})}
            >
            {v.name}
          </Text>
        ))}
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
 
AppRegistry.registerComponent('MyProject', () => MyProject);