条码扫描器反应原生 android UI 组件未显示

Question

I'm trying to build a custom native UI components for android in react-native. In particular, I'm trying to build a simple barcodescanner using this library: https://github.com/dm77/barcodescanner

I've followed the steps on the react native guide here and also read this blog post .

The problem is that I can see the View of the component with its background. The camera is not opening though. I can't figure out wether I'm missing something from the api or if I'm using them wrong.

I've set up a sample repo for the issue: https://github.com/themutt/react-native-zbar-camera-test

and you can find on the bottom of the post the screenshot of the results (I'm expecting a view with a camera but I've just the background of the view instead)

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" />

On the javascript side:

Barcode.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

And on my index.android.js

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

Answer 1

I also ran out of ideas to get that barcode scanner to work. My solution was to switch to the react-native-camera

HTH, Mike

Answer 2

set width and height in styles

<BarcodeScanner
        onBarCodeRead={barcodeReceived}
        style={{flex: 1, width: Dimensions.get('window').width, height: 300}}
        torchMode={'off'}
        cameraType={'back'}
      />