Ionic Native 介绍

最新推荐文章于 2024-06-09 10:04:03 发布

张大伟的博客

最新推荐文章于 2024-06-09 10:04:03 发布

阅读量1.7k

点赞数

分类专栏： ionic2

ionic2 专栏收录该内容

15 篇文章

订阅专栏

本文介绍IonicNative的作用及其在Ionic 2应用中如何实现原生功能。通过实例展示如何使用Geolocation插件获取地理位置信息，以及如何添加其他插件如Camera。IonicNative简化了原生插件的使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ionic Native是一个为Cordova/PhoneGap打造的一款TypeScript打包器。它的作用在于可以在你ionic2移动端应用上添加任何你想要的原生app的功能。

Ionic Native 包装的插件回调函数处于一个promise或者Observable里，
它会给所有的插件提供一个公共接口，并确保在Angular2中原生事件触发会被检测到。

我们分析一下下面一段代码：

import { Geolocation } from '@ionic-native/geolocation';
//引入ionic-native第三方包中的 地理
import { Platform } from 'ionic-angular';
//从ionic-angular中引入Platform Promise函数
class MyComponentOrService {

  constructor(private platform: Platform, private geolocation: Geolocation) {  //给构造函数传入插件,并赋值声明2个私有变量

    platform.ready().then(() => {  
      // 调用插件的getCurrentPostion()方法，通过then()方法获取返回值。
      geolocation.getCurrentPosition().then(pos => {
        console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
      });
       //创建一个监听器，每一次数值改变这个监听器都会输出新值
      const watch = geolocation.watchPosition().subscribe(pos => {
        console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
      });

      //关闭监听
      watch.unsubscribe();

    });

  }

}

安装核心包裹

npm install @ionic-native/core --save

注意：Ionic Native 核心包在Ionice 2中已经默认安装过了。

安装所需的插件
也就是安装@ionic-native/非核心包，比如我要安装一个相机插件：

ionic plugin add cordova-plugin-camera

所有包裹的名称都是基于插件的名称。

由于这些插件都是属于服务型模块，所以都会放在NgModule的providers的数组中。

import { Camera } from '@ionic-native/camera';

...

@NgModule({
  ...

  providers: [
    ...
    Camera
    ...
  ]
  ...
})
export class AppModule { }