React Naitve Vision 相机造型不起作用

Question

我正在尝试设计react-native-vision-camera相机组件的样式

<Camera
                            ref={selfieRef}
                            style={{
                                position: 'absolute',
                                width: 300,
                                height: 300,
                                left: (width - 300) / 2,
                                top: (height - 300) / 3
                            }}
                            isActive={true}
                            device={devices.front}
                            orientation='portrait'
                            photo={true}
                            enableHighQualityPhotos
                            enablePortraitEffectsMatteDelivery
/>

上面的代码在android上工作，但在ios上它仅在快速刷新时工作。 如果我硬刷新位置回到左：0 右：0

我尝试过在加载的组件上设置样式

 useEffect(() => {
        if (selfieRef?.current) {
            console.log(selfieRef.current.props)
            selfieRef.current.props.style = {
                top: (Dimensions.get('window').height - 350) / 3,
                left: (Dimensions.get('window').width - 300) / 2,
                position: 'absolute',
                width: 300,
                height: 300,
                borderRadius: 5
            }
            console.log(selfieRef.current.props)
        }
    }, [selfieRef])

但它也不起作用。

Answer 1

我遇到了视觉相机组件样式未正确应用的问题。经过一番研究，我找到了一个有效的解决方案：

const [isMounted, setIsMounted] = useState(false);

useEffect(() => {
 if (cameraPermission === 'granted') {
   setTimeout(() => {
     setIsMounted(true);
   }, 1200);
  }
}, [cameraPermission]);

{isMounted ? (
    <View style={styles.cameraContainer}>
      <Camera
        torch={torch}
        style={styles.camera}
        device={deviceBackCamera}
        photo
        codeScanner={handleCodeScanner}
        isActive
        enableZoomGesture
      />
    </View>
  ) : null}


cameraContainer: {
 position: 'absolute',
 top: top,
 left: 0,
 right: 0,
 bottom: top + deviceWidth - 120,
},
camera: {
 height: deviceHeight / (top + top) + (deviceWidth - 120),
},