javascript - 条形码扫描器 react native android UI 组件未显示

Question

我正在尝试在 react-native 中为 android 构建自定义 native UI 组件。特别是，我正在尝试使用此库构建一个简单的条码扫描器:https://github.com/dm77/barcodescanner

我已经按照 react native guide here 上的步骤操作了并阅读 this blog post .

问题是我可以看到组件的 View 及其背景。虽然相机没有打开。我不知道是我从 api 中遗漏了什么，还是我用错了。

我已经为这个问题设置了一个样本仓库: https://github.com/themutt/react-native-zbar-camera-test

你可以在帖子的底部找到结果的屏幕截图(我期待一个带摄像头的 View ，但我只有 View 的背景)

构建.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'
}

主 Activity .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";
    }
}

主应用程序.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>
    );
  }
}

Answer 1

在样式中设置宽度和高度

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