camera.takePictureAsync(options) 不是反应原生相机中的 function

Question

Hello im new in react native and i just building my first react native project with camera without expo. I installed it with npm install react-native-camera and then linked it with react-native link react-native-camera . The camera run successfuly, but when i triggered the snap button it got error like this....

{ [TypeError: camera.takePictureAsync is not a function. (In 'camera.takePictureAsync(options)', 'camera.takePictureAsync' is undefined)] │ line: 131480, │ column: 72, └ sourceURL: ' http://localhost:8081/index.bundle?platform=android&dev=true&minify=false ' }

Here is my code looks like...

 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 () => { try { const options = { quality: 0.5, base64: true }; const data = await camera.takePictureAsync(options); console.log(data.uri, '<<<<<<<<<<<<<<<<<<<<<'); } catch (error) { console.log(error, "ERROR <<<<<<<<<<<<<") } }; return ( <View style={styles.container}> <RNCamera ref={camera} style={styles.preview} type={RNCamera.Constants.Type.back} flashMode={RNCamera.Constants.FlashMode.on} androidCameraPermissionOptions={{ title: 'Permission to use camera', message: 'We need your permission to use your camera', buttonPositive: 'Ok', buttonNegative: 'Cancel' }} androidRecordAudioPermissionOptions={{ title: 'Permission to use audio recording', message: 'We need your permission to use your audio', buttonPositive: 'Ok', buttonNegative: 'Cancel', }} onGoogleVisionBarcodesDetected={({ barcodes }) => { console.log(barcodes) }} /> <View style={{ flex: 1, width: '100%', flexDirection: 'row', justifyContent: 'center', position: 'absolute', bottom: 0 }}> <TouchableOpacity style={styles.capture} onPress={takePicture}> <Text style={{ fontSize: 14 }}> SNAP </Text> </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

UPDATE (18.48): I tried using class component like in react-native-camera documentation did, and it finally works. But i still curious how to make it works in function component?

Answer 1

You should use camera.current.takePictureAsync(options); rather than camera.takePictureAsync(options); .

Answer 2

I was having the same problem. The solution was to go back to a Class component instead of a function one.

<Camera
   ref={ref => (this.cameraEl = ref)}
   style={{ flex: 1 }}
   type={Camera.Constants.Type.front}
/>

Answer 3

I got react-native-camera running with Functional Components. This is how:

function CameraComponent(props){
  let camera;
  async function takePicture(){
    if( camera ) {
      const options = {quality: 0.5};
      const data = await camera.takePictureAsync(options);
      console.log(data.uri);
    }
  }

  return(
    <View>
      <RNCamera
        ref={ref => (camera = ref)}
       />
     </View>
  );
}

Answer 4

  const cameraEl = useRef(null);
  async function takePicture() {
    console.log('takePicture');
    if (cameraEl.current) {
      const options = { quality: 0.5, base64: true };
      const data = await cameraEl.current.takePictureAsync(options);
      console.log(data.uri);
    }
  }

    <RNCamera
      // ref={ref => {
      //   this.camera = ref;
      // }}
      ref={cameraEl}

Answer 5

hi the correct way in function component should be

const ref = React.createRef();

const takePicture = async () => {
    if (ref.current) {
      const options = { quality: 0.5, base64: true };
      const data = await ref.current.takePictureAsync(options);
    
      console.log(data.uri);
    }
  };


  return (
    <View style={styles.container}>
      <RNCamera
        ref={ref}
        style={styles.preview}
        type={RNCamera.Constants.Type.back}
        flashMode={RNCamera.Constants.FlashMode.on}
        androidCameraPermissionOptions={{
          title: 'Permission to use camera',
          message: 'We need your permission to use your camera',
          buttonPositive: 'Ok',
          buttonNegative: 'Cancel',
        }}
        androidRecordAudioPermissionOptions={{
          title: 'Permission to use audio recording',
          message: 'We need your permission to use your audio',
          buttonPositive: 'Ok',
          buttonNegative: 'Cancel',
        }}
        onGoogleVisionBarcodesDetected={({ barcodes }) => {
          console.log(barcodes);
        }}
      />
      <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
        <TouchableOpacity onPress={ takePicture } style={styles.capture}>
          <Text style={{ fontSize: 14 }}> SNAP </Text>
        </TouchableOpacity>
      </View>
    </View>
  );