Question

我正在尝试创建带有圆角的条形码扫描蒙版。你有什么主意我该如何摆脱眼球中的这个角落？很多

https://i.imgur.com/FnKgbBE.jpg

$(".className").not(":has(img)")

Answer 1

我可以通过执行以下操作来做到这一点：

const CaptureBox = () => (
  <View testID="capture-box-container" style={styles.captureBox}>
    <View testID="top-left-corner" style={styles.topLeft} />
    <View testID="top-right-corner" style={styles.topRight} />
    <View testID="bottom-right-corner" style={styles.bottomRight} />
    <View testID="bottom-left-corner" style={styles.bottomLeft} />
  </View>
)

样式：

import { StyleSheet, ViewStyle } from 'react-native'

const edge: ViewStyle = {
  borderColor: 'white',
  borderLeftWidth: 3,
  borderTopWidth: 3,
  borderTopLeftRadius:10,
  position: 'absolute',
  height: 50,
  width: 44,
}

export const styles = StyleSheet.create({
  bottomRight: {
    transform: [{ rotate: '180deg' }],
    ...edge,
    right: 0,
    bottom: 0,
  },
  bottomLeft: {
    transform: [{ rotateX: '180deg' }],
    ...edge,
    bottom: 0,
    left: 0,
  },
  captureBox: {
    height: 240,
    width: 200,
    backgroundColor: 'transparent',
    justifyContent: 'center',
    alignItems: 'center',
  },
  topLeft: {
    ...edge,
    left: 0,
    top: 0,
  },
  topRight: {
    transform: [{ rotateY: '180deg' }],
    ...edge,
    top: 0,
    right: 0,
  },
})

否则，您将看到包裹边缘的容器的背景颜色。

反应本机条形码扫描仪蒙版

1 个答案: