我是ionic
开发的新手。我想构建一个像我们直接打开应用程序一样打开相机屏幕的应用程序。在第一个屏幕中,我还需要在相机屏幕顶部显示一个文本框。用户可以搜索一些文本并在此文本框中选择一个字符串。从搜索中选择字符串后,该div将被隐藏并开始使用相机进行条形码扫描。
现在,用户将扫描条形码,并且在成功扫描条形码后(比在后台扫描),我们需要对条形码结果执行一些操作,然后将该结果作为覆盖显示在相机屏幕上。
成功扫描条形码后,我们需要执行一些操作,而不是停止相机或条形码扫描。
对于此功能,我想将应用程序开发为React-Native / Ionic3。那么,这是否为我提供了更好,更可靠的解决方案?或者如果我分别开发本机Android和iOS会更好。
我尝试使用ionic 3使用此插件进行条形码扫描ionic-native/barcode-scanner
。
我在这里附上我的home.ts
和app.moule.ts
文件代码
Home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BarcodeScanner, BarcodeScannerOptions } from '@ionic-native/barcode-scanner';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(
public navCtrl: NavController,
private barcodeScanner: BarcodeScanner
) {
this.scan();
};
scan() {
/******** Barcode scanner *******/
this.barcodeScanner.scan().then((barcodeData) => {
console.log("barcodeData", barcodeData)
this.scan();
}, (err) => {
alert(`Error ${err}`);
console.log("error", err);
});
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Camera } from '@ionic-native/camera';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
/** Add QRScanner in the provider array **/
providers: [
StatusBar,
SplashScreen,
Camera,
{ provide: ErrorHandler, useClass: IonicErrorHandler }
]
})
export class AppModule { }
在此情况下,当扫描第一个条形码时,然后停止约1-2秒的相机屏幕,然后再次启动条形码扫描屏幕。但是我想做的是条形码扫描继续运行,而条形码扫描却没有挂起。并且所有操作都会在后台执行。
在对此条形码执行一些操作时,我不知道如何覆盖初始文本框以及此条形码扫描结果在扫描屏幕上显示。
请帮助我找出我的问题和疑问。 预先感谢。