iOS 上的 React Native Expo:授予权限后,iPhone 上的相机是黑色的

React Native Expo on iOS: Camera is black on iPhone after granting permissions

提问人:Lucmel 提问时间:11/14/2023 更新时间:11/14/2023 访问量:21

问:

我是将react native与Expo框架一起使用的新手。我正在尝试访问手机的摄像头。我在 Android 手机上测试了该应用程序,应用程序要求我接受权限并且相机工作正常。 完全相同的代码,不同的设备:iPhone。使用 Testflight,我发布了适用于 iOS 的相同应用程序,下载了 TestFlight 并安装了该应用程序。 当我的应用程序请求相机权限时,我接受了,但相机仍然是黑色的。我尝试检查iPhone设置中的权限,它们都正确设置在“允许”上。 我尝试在 iPhone 上删除并重新安装该应用程序,但问题仍然存在。

我的应用使用屏幕和导航

我正在使用“expo-camera”:“~13.4.4”

以下是扫描仪屏幕代码,相机应使用的位置:

const ScannerScreen = ({ navigation, route }) => {
    const { host, tokenData, canvas, petShopData } = useContext(Contesto);
    const { _t } = useContext(LanguageContext);

    const [hasPermission, setHasPermission] = useState(null);
    const [scanned, setScanned] = useState(false);
    const [loader, setLoader] = useState(false);
    
    const cameraRef = useRef(null);
    
const [isFocused, setIsFocused] = useState(false);

    useEffect(() => {
        navigation.setOptions({
            title: _t("scanAProductBarcode"),
            headerTintColor: "#0071bb",
            headerBackTitleVisible: false,
            headerTitleAlign: 'center',
        });
    }, [navigation])

    /*********************************************** */
    /**************** PERMISSIONS REQUESTS ***********/
    /*********************************************** */

    useFocusEffect(
        React.useCallback(() => {
            setIsFocused(true);
            const startCamera = async () => {
                const { status } = await Camera.requestCameraPermissionsAsync();
                if (status === 'granted' && isFocused) {
                    setHasPermission(true);
                    await cameraRef.current?.resumePreview();
                    console.log('Camera started');
                }
                if (Platform.OS == 'ios' && status !== 'granted') {
                    Linking.openSettings();
                }
            };

            startCamera();

            return () => {
                setIsFocused(false);
                stopCamera();
            };
        }, [])
    );

    const stopCamera = async () => {
        await cameraRef.current?.pausePreview();
        console.log('Camera stopped');
    };
    
    useEffect(() => {
        console.log("------##### SCANNER SCREEN LOADED  ########----")
        getBarCodeScannerPermissions();
    }, []);
    

    /** CAMERA-BARCODE PERMISSIONS */
    const getBarCodeScannerPermissions = async () => {
        //console.log("camera permissions requested");
        const { status } = await Camera.requestCameraPermissionsAsync();// .requestPermissionsAsync();
        if (status) {
            setHasPermission(status === 'granted');
        }
        if (Platform.OS == 'ios' && status !== 'granted') {
            Linking.openSettings();
        }
    };

    /** /CAMERA-BARCODE PERMISSIONS */

这是返回视图:

            <View style={barscan.container}>
                {(hasPermission === null) &&
                    <View>
                        <Text style={[globalStyles.bigSubtitle, { textAlign: "center" }]}>{_t("waitingCameraPermissions")}</Text>
                    </View>
                }
                {(hasPermission === false) &&
                    <View style={{ width: "100%", flex: 1, flexDirection: "column", alignContent: "center", justifyContent: "center", }}>
                        <Text style={[globalStyles.bigSubtitle, { textAlign: "center" }]}>No access to camera</Text>
                        <Text style={[globalStyles.bigSubtitle, { textAlign: "center" }]}>In order to scan codes, please grant access to camera
                            <TouchableOpacity onPress={getBarCodeScannerPermissions}>
                                <Text style={[globalStyles.btnReqCamPerm, globalStyles.buttonInfo, { textAlign: "center" }]}>
                                    <AntDesign name="camera" size={26} color="#fff" /> {_t("grantCameraPermissions")}
                                </Text>
                            </TouchableOpacity>
                        </Text>
                    </View>
                }
                {(hasPermission !== null && hasPermission !== false) && isFocused && 
                    <>
                        <Camera
                            ref={cameraRef}
                            type={0}
                            autoFocus={true}
                            onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
                            style={[barscan.barCodeCamera,]}
                        />
                    </>
                }
            </View>

至于Android应用程序,当我允许使用相机时,<Camera组件开始处于活动状态并工作。在 Android 手机上,代码工作正常,但在 iPhone 上,我收到弹出消息授予,我确认并授权,但相机组件显示为黑色并且不起作用。

我使用 Testflight 在 3 台不同的 iPhone(X、12 和 15)上测试了该应用程序,结果没有改变:黑色相机组件。

我想知道此时是否可能是脚本或TestFlight问题。

ios react-native ios expo-相机

评论


答: 暂无答案