你好,我是 React Native 的新手,我只是在没有 expo 的情况下用相机构建我的第一个 React Native 项目。
我用 npm install react-native-camera
安装它,然后用 react-native link react-native-camera
链接它。
相机运行成功,但是当我触发快照按钮时出现这样的错误....
{ [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' }
这是我的代码看起来像...
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
文档中那样使用类组件,它终于起作用了。但是我还是很好奇如何让它在函数组件中工作?
最佳答案
您应该使用 camera.current.takePictureAsync(options);
而不是 camera.takePictureAsync(options);
。
关于javascript - camera.takePictureAsync(options) 不是 react native 相机的功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58048465/