提问人:Lucmel 提问时间:11/14/2023 更新时间:11/14/2023 访问量:21
iOS 上的 React Native Expo:授予权限后,iPhone 上的相机是黑色的
React Native Expo on iOS: Camera is black on iPhone after granting permissions
问:
我是将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问题。
答: 暂无答案
评论