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 快速捕捉?