camera.takePictureAsync(options) 不是反应本机相机的功能

Posted

技术标签:

【中文标题】camera.takePictureAsync(options) 不是反应本机相机的功能【英文标题】:camera.takePictureAsync(options) is not a function in react native camera 【发布时间】:2019-09-22 10:52:12 【问题描述】:

你好,我是 react native 的新手,我只是在没有博览会的情况下使用相机构建了我的第一个 react native 项目。 我用npm install react-native-camera 安装它,然后用react-native link react-native-camera 链接它。 相机运行成功,但是当我触发快照按钮时,出现这样的错误......

[TypeError: camera.takePictureAsync 不是函数。 (在 'camera.takePictureAsync(options)' 中,'camera.takePictureAsync' 未定义)] │ 线路:131480, │ 栏目:72, └ sourceURL: 'http://localhost:8081/index.bundle?platform=android&dev=true&minify=false'

这是我的代码看起来像......

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): 我尝试使用 react-native-camera 文档中的类组件,它终于可以工作了。但是我还是很好奇如何让它在函数组件中工作?

【问题讨论】:

你能解释一下const camera = useRef(null) 的作用吗?这将如何使camera 具有takePictureAsync 之类的属性 - 也许是const camera = useRef(RNCamera) 我尝试将其更改为const camera = useRef(RNCamera),但仍然不起作用 同样的错误?或者别的什么 哦,我刚刚又读到了错误……In 'camera.takePictureAsync(options)', 'camera.takePictureAsync' is undefined)这很奇怪 是的,它仍然有同样的错误:/ 【参考方案1】:

您应该使用camera.current.takePictureAsync(options); 而不是camera.takePictureAsync(options);

【讨论】:

【参考方案2】:

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

【讨论】:

【参考方案3】:

我遇到了同样的问题。解决方案是回到类组件而不是函数组件。

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

【讨论】:

虽然这可行,但它是一种解决方法,而不是解决方案。【参考方案4】:

你好,函数组件中正确的方式应该是

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

【讨论】:

【参考方案5】:
  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

【讨论】:

以上是关于camera.takePictureAsync(options) 不是反应本机相机的功能的主要内容,如果未能解决你的问题,请参考以下文章

如何让我的 react-native-camera 快速捕捉?

React Native CameraRoll 权限被拒绝

React Native / Expo - 将图像传递到预览屏幕

世博会相机拍照崩溃的应用程序

7*7矩阵求逆的verilog实现

滚动数组要来回赋初值呀。。orzzzzzzzzzzzzzzzzzzzzzzzzzz