shoutem - 风格shoutem相机组件

Question

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

sayem.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,
  },
}

正如您所提到的，我们确实打算重新实现焦点框架，使其具有响应性。