React-Native-Camera Limit Camera Area - PullRequest
Новая
       32

React-Native-Camera Limit Camera Area

1 голос
/ 31 октября 2019

У меня есть некоторые проблемы, ограничивающие область RNCamera ее окружающим видом. Все связанные билеты, которые я нашел здесь, не дали правильного решения с помощью RNCamera.

Мой компонент имеет конструкцию гибкой колонны с двумя видами.

  • Вид 1: в качестве оболочки для камеры
  • Представление 2: представление результатов, окрашенное в красный цвет с непрозрачностью

Как вы можете видеть, RNCamera выходит за границы окружающего представления. Это приводит к возникновению проблем при сканировании штрих-кода.

Обнаружен штрих-код на снимке экрана с примерами.

Можно ли ограничить исходную камеру реагирования до границ окружающего ее вида?

Или, если нет, есть способ увидеть координаты отсканированного штрих-кода и сравнить его с измерениями видов.

Отсканированный штрих-код имеет границы, но я не уверен, как перевести это на правильныйпозиция.

Screenshot

Bounds and position

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>
    );

}
...