样式 shoutem 相机组件

Question

他，我试图将正确的样式放在适当的位置，以便在相机屏幕上看到焦点图像，并在所有方面都有一点填充，但不知何故我无法完成。

shoutem.camera 来源看起来像：

<View style={style.cameraContainer}>
    <Camera
      onBarCodeRead={this.onQRCodeScanned}
      style={style.cameraView}
      aspect={Camera.constants.Aspect.fill}
      captureQuality={cameraQuality}
    />
    <Image
      source={require('../assets/images/focus-frame.png')}
      style={style.cameraFocusFrame}
    />
</View>

我要 style.cameraContainer & style.cameraView & style.cameraFocusFrame。

Answer 1

这些样式的样式规则可以在 themeName.js 的最后找到。这是来自默认主题 Rubicon：

'shoutem.camera.QRCodeScanner': {
  cameraContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cameraFocusFrame: {
    width: 175,
    height: 165,
    resizeMode: 'contain',
  },
  cameraView: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
  noPermissionsMessage: {
    alignSelf: 'center',
    fontSize: 18,
    lineHeight: 20,
  },
}

正如您所提到的，我们确实打算重新实现对焦框以自然响应。

样式 shoutem 相机组件

Style shoutem camera component

shoutem