未处理的承诺拒绝: TypeError:未定义不是对象(计算'camera.takePictureAsync') React-Native expo-camera

Question

我试图创建一个函数来访问我的设备的摄像头，并允许我拍照，但我得到了上面的错误。我模拟了类似于请求访问相机胶卷的情况，它工作得很好，但我无法让它在相机上工作。

这可能是什么原因造成的？下面是我的一些代码：

import * as ImagePicker from 'expo-image-picker' //I am using expo
import {Camera} from 'expo-camera'  

export default function Photo(){

//图片选取器函数启动

useEffect(() => {
(async ()=> {
   if (Platform.OS != 'web'){
      const ( status !== 'granted') {
      if(status !== 'granted) {
      alert('Camera roll required to upload photo from your library');
   }
 }
})();
},[]);

//图片选择器函数结束

const camera = useRef(null) //added this
const takePicture = async () => { // added this



useEffect(() => {
    (async () => {
        if (Platform.OS !== 'web'){
        const { status1 } = await Camera.requestPermissionsAsync();
            if (status1 !== 'granted'){
            alert('Camera required to take a photo');
            }
} //added this
        },
    })();
}, [])


}

<Camera //added this
  ref = { camera }
  onGoogleVisionBarcodesDetected = {({barcodes}) => {
       console.log(barcodes)
   }}
 /> //added this

<View style = {[ styles.button, {justifyContent: 'center',  borderRadius: 20, backgroundColor: '#fff', paddingTop: 10, width: width*0.5, alignItems: 'center' } ]}>                 
                <TouchableOpacity 
                    color='#fff'
                    onPress = { ()=> takePicture () }
                    >

                <Text style = {[ styles.button, {}]}>Take Photo </Text>
                </TouchableOpacity>


            </View>

Answer 1

这可能会有帮助

import React, { useRef } from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import { RNCamera } from 'react-native-camera'


function PlayWithCamera() {

    const camera = useRef(null);

    const takePicture = async () => {
        const result1 = await camera.takePictureAsync();
        ....
    };

    return (
        <View style={styles.container}>
            <RNCamera
                ref={camera}
                .....
                onGoogleVisionBarcodesDetected={({ barcodes }) => {
                    console.log(barcodes)
                }}
            />
            <View ... >                 
                <TouchableOpacity 
                    onPress={() => takePicture() } // change here
                >

                ......
                </TouchableOpacity>


            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'black',
    },
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    capture: {
        flex: 0,
        backgroundColor: '#fff',
        borderRadius: 5,
        padding: 15,
        paddingHorizontal: 20,
        alignSelf: 'center',
        margin: 20,
    },
})

export default PlayWithCamera