未处理的承诺拒绝：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(){

// Image Picker 函数启动

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

//Image Picker函数结束

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