---
# System prepended metadata

title: Cordova結合原生開發的應用程式
tags: [' native', cordova]

---

---
title: Cordova結合原生開發的應用程式
tags: cordova, native
description: Cordova結合原生開發的應用程式
Author: Aaron@gis.tw
---
## 需求: Cordova結合原生開發的應用程式
- 使用Cordova開發, 但攝影機功能需要結合廠商的sdk開發, 需要寫native code(objective c & java)
- 步驟:
    1.結合廠商的sdk開發
    2.把他寫成plugin, 將開發的功能結合進來
- 問題:
    - 這個需要顯示畫面,不是只有提供功能,所以單純的plugin需求無法滿足
- 解法:
    - 尋找能從Cordova轉畫面到原生視窗的開發方式
    - [cordova-plugin-nativeview](https://github.com/mfdeveloper/cordova-plugin-nativeview) 這套可以滿足需求
- 安裝:
- iOS
```shell=
# Objective-C version (Default)
pod 'cordova-plugin-nativeview', '~> 1.0.7'

# Swift version (needs update to latest Objective-c implementations)
pod 'cordova-plugin-nativeview', :git => 'https://github.com/mfdeveloper/cordova-plugin-nativeview.git', :branch => 'swift'
```
- Android
```shell=
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

implementation ('com.github.mfdeveloper:cordova-plugin-nativeview:1.0.7')
```
- 使用方式
```shell=
document.addEventListener("deviceready", function() {

    /*
     * 給Storyboard跟ViewControlller的名稱即可
     */
    cordova.plugins.NativeView.show('Main', 'vcCameraCCTV')
    .then(function() {
      
      /**
       * 做完要接著做的動作寫在這裡
       */
    });

}, false);
```
- Xcode畫面
![](https://i.imgur.com/sBRCQ5G.png)

- Cordova APP
![](https://i.imgur.com/nIsGaum.png)


- 攝影機畫面(Objective C撰寫)
![](https://i.imgur.com/KvzzNjQ.jpg)
