Сканер штрих-кода, реагирующий на собственный компонент пользовательского интерфейса Android, не отображается

Я пытаюсь создать собственные собственные компоненты пользовательского интерфейса для Android в режиме реагирования. В частности, я пытаюсь создать простой сканер штрих-кодов, используя эту библиотеку: https://github.com/dm77/barcodescanner

Я следовал инструкциям нативного руководство здесь, а также прочтите эта запись в блоге.

Проблема в том, что я вижу вид компонента с его фоном. При этом камера не открывается. Я не могу понять, упускаю ли я что-то из API или использую их неправильно.

Я создал образец репозитория для этой проблемы: https://github.com/themutt/react-native-zbar-camera-test

и вы можете найти внизу поста скриншот результатов (я ожидаю вид с камеры, но вместо этого у меня есть только фон вида)

build.gradle

dependencies {
  compile fileTree(dir: "libs", include: ["*.jar"])
  compile "com.android.support:appcompat-v7:23.0.1"
  compile "com.facebook.react:react-native:+"  // From node_modules
  compile 'me.dm7.barcodescanner:zbar:1.9.8'
}

MainActivity.java

package com.zbarcamera;

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from 
 JavaScript.
     * This is used to schedule rendering of the component.
     */
     @Override
     protected String getMainComponentName() {
         return "ZBarCamera";
    }
}

MainApplication.java

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new ScannerReactPackage()
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

ReactBarcodeManagerView.java

public class ReactBarcodeViewManager extends SimpleViewManager<ZBarScannerView> {
    public static final String REACT_CLASS = "ZBarCamera";

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    public ZBarScannerView createViewInstance(final ThemedReactContext context) {
        final ZBarScannerView mScannerView = new ZBarScannerView(context);
        mScannerView.startCamera();
        mScannerView.setResultHandler(new ZBarScannerView.ResultHandler() {
            @Override
            public void handleResult(Result result) {
                WritableMap event = Arguments.createMap();
                event.putString("barcode", result.getContents());
                context.getJSModule(RCTEventEmitter.class).receiveEvent(
                        mScannerView.getId(),
                        "topChange",
                        event
                );
            }
        });
        return mScannerView;
    }

}

ScannerReactPackage.java

public class ScannerReactPackage implements ReactPackage {

    @Override
    public List<ViewManager> createViewManagers(
            ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList(
                new ReactBarcodeViewManager()
        );
    }

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

AndroidManifest.xml

<uses-permission android:name="android.permission.CAMERA" />

На стороне javascript:

Штрих-код.js

import React from 'react'
import PropTypes from 'prop-types'
import { requireNativeComponent, Text, View } from 'react-native'

class Barcode extends React.Component {
    constructor(props) {
        super(props)
        this._onChange = this._onChange.bind(this)
    }
    _onChange(event) {
        if (!this.props.onBarcodeRead) {
            return
        }
        this.props.onBarcodeRead(event.nativeEvent)
    }

    render() {
        return (
            <ZBarCamera 
                {...this.props} 
                style={{width: '100%', height: '50%', backgroundColor: 'tomato'}} 
                onChange={this._onChange} 
            />
        )
    }
}

Barcode.propTypes = {
    onBarcodeRead: PropTypes.func,
    ...View.propTypes
}

const ZBarCamera = requireNativeComponent('ZBarCamera', Barcode, {
    nativeOnly: {
        onChange: true
    }
})

export default Barcode

И на моем index.android.js

export default class ZBarCamera extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Barcode
          onBarcodeRead={(data) => console.log(data)}
        />
      </View>
    );
  }
}

Предварительный просмотр скриншота


person Gianluca Rigoletti    schedule 02.10.2017    source источник
comment
Прошло довольно много времени с тех пор, как это было опубликовано. Вы нашли решение?   -  person Mike    schedule 07.08.2018
comment
К сожалению, я еще не нашел никакого решения, поэтому мне пришлось отказаться от него.   -  person Gianluca Rigoletti    schedule 09.09.2018


Ответы (1)


У меня также закончились идеи, как заставить этот сканер штрих-кода работать. Мое решение состояло в том, чтобы переключиться на react-native-camera

ХТХ, Майк

person Mike    schedule 10.09.2018