Question

我在将RNCamera的区域限制为其周围的视图时遇到一些问题。我在这里找到的所有相关票证均未提供RNCamera的适当解决方案。

我的组件具有两个视图的弹性列设计。

视图1：作为相机的包装器
视图2：结果视图，以红色显示，不透明

如您所见，RNCamera越过了周围视图的边界。这导致条形码扫描时出现问题。

检测到示例屏幕截图中的条形码。

是否可以将本机相机限制在其周围视图的边界？

或者，如果没有，则可以查看扫描条形码的坐标并将其与视图的尺寸进行比较。

扫描的条形码有边界，但是我不确定如何将其转换到正确的位置。

const Stocktake = () => {
    let redBoxView, cameraWrapperView, camera

    function onBarCodeRead(bc) {
        console.log('bc', bc)

        if (redBoxView) {
            redBoxView.measure((x, y, width, height, pageX, pageY) => {
                console.log('RedBox', x, y, width, height, pageX, pageY);
                console.log('X', pageX)
                console.log('Xend', pageX + width)
                console.log('Y', pageY)
                console.log('Yend', pageY + height)
            })
        }
    }

    return (
        <View style={{flex: 1}}>
            <View style={{ backgroundColor: "purple", flex: 1 }}
                ref={view => {
                    cameraWrapperView = view
                }}>
                <RNCamera
                    ref={ref => {
                        camera = ref;
                    }}
                    defaultTouchToFocus
                    mirrorImage={false}
                    onBarCodeRead={(bc) => { onBarCodeRead(bc) }}
                    onFocusChanged={() => { }}
                    onZoomChanged={() => { }}
                    style={styles.preview}
                    playSoundOnCapture={true}
                />
            </View>
            <View style={{ backgroundColor: "rgba(254,0,0,0.6)", flex: 2, alignItems: "flex-end", justifyContent: "flex-end" }}
                ref={ref => {
                    redBoxView = ref;
                }}>
                {redBoxView ? <Text>{JSON.stringify(redboxMeasures)}</Text> : null}
            </View>


        </View>
    );

}

React-Native-Camera限制相机区域

0 个答案: