如何使用 expo React Native 相机拍照？

Question

我刚刚开始将 React Native 与 Expo 一起使用，所以我有点困惑。 所以，我制作了一个我在主屏幕中导入的相机组件。 一切看起来都很好。 但是我不能拍照。 我无法单击快照图标并保存图像。 有没有我错过的组件？ 我只在下面发布了 CameraComponent function。

CameraScreen.js

const CameraScreen = () => {


    const [hasPermission, setHasPermission] = useState(null);
    const [type, setType] = useState(Camera.Constants.Type.back);

    useEffect(() => {
        (async () => {
            const { status } = await Camera.requestCameraPermissionsAsync();
            setHasPermission(status === 'granted');
        })();
    }, []);

    if (hasPermission === null) {
        return <View />;
    }
    if (hasPermission === false) {
        return <Text>No access to camera</Text>;
    }

    const takePicture = () => {
        if (Camera) {
            Camera.takePictureAsync({ onPictureSaved: onPictureSaved });
        }
    };

    const onPictureSaved = photo => {
        console.log(photo);
    }

    return (

        <View style={styles.container}>
            <Camera style={styles.camera}
                type={type}
                ref={(r) => {
                    camera = r
                }}>
                <View style={styles.buttonContainer}>
                    <View style={styles.flip}>
                        <TouchableOpacity
                            style={styles.button}
                            onPress={() => {
                                setType(
                                    type === Camera.Constants.Type.back
                                        ? Camera.Constants.Type.front
                                        : Camera.Constants.Type.back
                                );
                            }}
                        >
                            <Text style={styles.text}> Flip </Text>
                        </TouchableOpacity>
                    </View>

                    <View style={styles.Shot}>
                        <TouchableOpacity style={styles.button} onPress={takePicture}>
                            <Text style={styles.text}> Shot </Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </Camera>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    camera: {
        flex: 1,
        justifyContent: 'flex-end',
        paddingBottom: 25,
        paddingLeft: 10,
        paddingRight: 10
    },
    flip:{ 
    },
    Shot:{
    },
    buttonContainer: {
        flexDirection: 'row',
        backgroundColor: 'transparent',
        justifyContent: 'space-between',
        alignItems: 'flex-end',
    },
    text: {
        fontSize: 25,
        color: 'white',
    },
});

export default CameraScreen

底部的按钮（拍摄）应自动拍摄并保存图像。

Answer 1

代替

Camera.takePictureAsync({ onPictureSaved: onPictureSaved });

保存图片时调用的回调。 如果设置，该方法的promise在抓图后会立即解析为无数据。 它应包含的数据将传递给此回调。 如果您不希望在拍摄后立即显示或处理拍摄的照片，则此回调可让您跳过等待照片保存的过程。

您应该使用 takePictureAsync function 中的异步takePictureAsync

Camera.takePictureAsync()
    .then(onPictureSaved);


//your onPictureSaved function
const onPictureSaved = ({ uri, width, height, exif, base64 }) => {
    console.log(uri);
}