Как сделать центр сканера штрих-кода прозрачным? - PullRequest
Новая
       22

Как сделать центр сканера штрих-кода прозрачным?

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

Я создаю сканер штрих-кода, используя expo-barcode-scanner

Я создал экран ниже, весь экран прозрачный, но я хочу сделать его похожим на тот, что на втором скриншоте enter image description here

Я пытаюсь создать экран ниже, только квадрат QR-кода прозрачен

What i want to achieve

<BarCodeScanner
  style={styles.mainContainer}>
  <TouchableOpacity
    onPress={() => {
      navigation.navigate('Home')
    }}
    style={styles.backButton}
  >
    <Entypo
      style={{ color: Colors.SAWhite }}
      name="chevron-thin-left"
      size={25}
    />
  </TouchableOpacity>

  <View style={styles.qrContainer}></View>

  <View style={styles.messageBox}>
    <FontAwesomeIcon
      name="qrcode"
      size={50}
      style={isValid ? styles.initialColor : styles.errorColor}
    />
    {isValid ? (
      <Text style={[fonts.SemiBoldTitle, styles.initialColor]}>
        {Languages.Scanner.initialMessage}
      </Text>
    ) : (
      <Text style={[fonts.SemiBoldTitle, styles.errorColor]}>
        {Languages.Scanner.errorMessage}
      </Text>
    )}
  </View>
</BarCodeScanner>

стили

const styles = StyleSheet.create({
  mainContainer: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
  },
  backButton: {
    alignSelf: 'flex-start',
    marginLeft: '5%',
  },
  qrContainer: {
    width: 220,
    height: 220,
    borderColor: Colors.SAWhite, //white
    borderWidth: 1,
    margin: '10%',
  },
  messageBox: {
    width: '85%',
    height: '30%',
    backgroundColor: Colors.SAWhite,
    borderColor: Colors.SABlack,
    borderWidth: 1,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'space-evenly',
  },
  initialColor: {
    color: Colors.SASecondary,//grey
    textAlign: 'center',
    marginLeft: '10%',
    marginRight: '10%',
  },
  errorColor: {
    color: Colors.SARed,
    textAlign: 'center',
    marginLeft: '10%',
    marginRight: '10%',
  }, 
})

Я пытался обернуть его вокруг вида, но он также отображает центральную рамку в цвете

Я пробовал код экспо-кода , но это также нехорошая реализация

1 Ответ

0 голосов
/ 30 октября 2019

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

const scanOverlay = {
    position:        'absolute',
    backgroundColor: 'rgba(255,0,0,0.5)',
};

<View>
    <Camera />
    <View style={StyleSheet.absoluteFill}>
        <View style={[scanOverlay, {top: 0, left: 0, width: '25%', bottom: 0}]} />
        <View style={[scanOverlay, {top: 0, left: '25%', right: '25%', height: '25%'}]} />
        <View style={[scanOverlay, {bottom: 0, left: '25%', right: '25%', height: '25%'}]} />
        <View style={[scanOverlay, {top: 0, right: 0, width: '25%', bottom: 0}]} />
    </View>
</View>;
...