camera.takePictureAsync(options) 不是反應原生相機中的 function

Question

你好，我是 react native 的新手，我只是用沒有 expo 的相機構建我的第一個 react native 項目。 我使用npm install react-native-camera安裝它，然后將其與react-native link react-native-camera 。 相機運行成功，但是當我觸發快照按鈕時，出現這樣的錯誤......

{ [TypeError: camera.takePictureAsync 不是 function。 （在 'camera.takePictureAsync(options)' 中，'camera.takePictureAsync' 未定義）] │ line: 131480, │ column: 72, └ sourceURL: ' http://localhost:8081/index.bundle?platform=android&dev=真&縮小=假' }

這是我的代碼看起來像......

 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

更新（18.48）：我嘗試使用 class 組件，就像在react-native-camera文檔中所做的那樣，它終於可以工作了。 但我仍然很好奇如何使它在 function 組件中工作？

Answer 1

你應該使用camera.current.takePictureAsync(options); 而不是camera.takePictureAsync(options); .

Answer 2

我遇到了同樣的問題。 解決方案是將 go 返回到 Class 組件，而不是 function 組件。

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

Answer 3

我讓 react-native-camera 使用功能組件運行。 這是如何：

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

您好 function 組件中的正確方法應該是

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>
  );