条形码扫描器反应原生Android UI组件没有显示

Question

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

我按照反应原生guide here的步骤，并阅读this blog post。

问题是我可以看到组件的视图及其背景。虽然相机没有打开。我无法弄清楚我是否遗漏了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'
}

main 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";
    }
}

main application.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);
  }
}

react barcode manager view.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;
    }

}

scanner react package.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方面：

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

在我的index.android.js上

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

Answer 1

我也没有想法让条形码扫描仪工作。我的解决方案是切换到react-native-camera

HTH，迈克