这应该包含在react-native API中,但我似乎找不到任何开箱即用的API。我想点击一个按钮就打开摄像头。我可以看到一些API只适用于iOS,但react-native应该可以跨平台使用。有人知道如何使用react-native访问相机(而不是图库)吗?
2izufjch1#
为此,您可能需要使用react-native-camera模块。下面是库的使用示例:
'use strict'; import React, { Component } from 'react'; import { AppRegistry, Dimensions, StyleSheet, Text, TouchableHighlight, View } from 'react-native'; import Camera from 'react-native-camera'; class BadInstagramCloneApp extends Component { render() { return ( <View style={styles.container}> <Camera ref={(cam) => { this.camera = cam; }} style={styles.preview} aspect={Camera.constants.Aspect.fill}> <Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text> </Camera> </View> ); } takePicture() { const options = {}; //options.location = ... this.camera.capture({metadata: options}) .then((data) => console.log(data)) .catch(err => console.error(err)); } } const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', }, preview: { flex: 1, justifyContent: 'flex-end', alignItems: 'center' }, capture: { flex: 0, backgroundColor: '#fff', borderRadius: 5, color: '#000', padding: 10, margin: 40 } }); AppRegistry.registerComponent('BadInstagramCloneApp', () => BadInstagramCloneApp);
vql8enpb2#
在React Native中,您可以通过首先使用NPM安装摄像机来访问摄像机:npm安装React Native摄像机--保存React Native链接React Native摄像机然后在您的组件中使用此命令:
takePicture() { const options = {}; //options.location = ... this.camera.capture({metadata: options}) .then((data) => console.log(data)) .catch(err => console.error(err)); }
完整的例子请看这个github repo:https://github.com/lwansbrough/react-native-camera
dgsult0t3#
我发现react-native-picker图像拾取器handier为我的需要,它可以用于相机和画廊。对于下面的例子,你需要安装版本:“React Native图像选取器”:“^3.3.2”,https://www.npmjs.com/package/react-native-image-picker
import React, {useState, useEffect} from 'react'; import {StyleSheet, Text, View, Image} from 'react-native'; import cameraImage from '../../../../assets/icons/camera.png'; import galleryImage from '../../../../assets/icons//gallery.png'; import {TouchableWithoutFeedback} from 'react-native-gesture-handler'; import * as ImagePicker from 'react-native-image-picker'; import {PermissionsAndroid} from 'react-native'; const ImagePicker = () => { const [responseCamera, setResponseCamera] = React.useState(null); const [responseGallery, setResponseGallery] = React.useState(null); const openCameraWithPermission = async () => { try { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.CAMERA, { title: 'App Camera Permission', message: 'App needs access to your camera ', buttonNeutral: 'Ask Me Later', buttonNegative: 'Cancel', buttonPositive: 'OK', }, ); if (granted === PermissionsAndroid.RESULTS.GRANTED) { ImagePicker.launchCamera( { mediaType: 'photo', includeBase64: false, maxHeight: 200, maxWidth: 200, }, (response) => { console.log(response); setResponseCamera(response); setResponseGallery(null); }, ); } else { console.log('Camera permission denied'); } } catch (err) { console.warn(err); } }; return ( <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-around', margin: 4, }}> <TouchableOpacity onPress={() => openCameraWithPermission()}> {responseCamera === null ? ( <Image style={styles.icon} source={cameraImage} /> ) : ( <Image style={styles.icon} source={{uri: responseCamera.uri}} /> )} </TouchableOpacity> <TouchableOpacity onPress={() => ImagePicker.launchImageLibrary( { mediaType: 'photo', includeBase64: false, maxHeight: 200, maxWidth: 200, }, (response) => { setResponseGallery(response); setResponseCamera(null); }, ) }> {responseGallery === null ? ( <Image style={styles.icon} source={galleryImage} /> ) : ( <Image style={styles.icon} source={{uri: responseGallery.uri}} /> )} </TouchableOpacity> </View> ); }; const styles = StyleSheet.create({ icon: { height: 50, width: 50, }, }); export default ImagePicker;
Android的权限:
<uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-feature android:name="android.hardware.camera" />
wooyq4lh4#
目前,react-native-camera已弃用,如果您希望实现本机性能并获得功能支持,https://github.com/mrousavy/react-native-vision-camera是不错的选择
react-native-camera
function App() { const devices = useCameraDevices('wide-angle-camera') const device = devices.back if (device == null) return <LoadingView /> return ( <Camera style={StyleSheet.absoluteFill} device={device} isActive={true} /> ) }
https://mrousavy.com/react-native-vision-camera/docs/guides
4条答案
按热度按时间2izufjch1#
为此,您可能需要使用react-native-camera模块。
下面是库的使用示例:
vql8enpb2#
在React Native中,您可以通过首先使用NPM安装摄像机来访问摄像机:npm安装React Native摄像机--保存React Native链接React Native摄像机
然后在您的组件中使用此命令:
完整的例子请看这个github repo:https://github.com/lwansbrough/react-native-camera
dgsult0t3#
我发现react-native-picker图像拾取器handier为我的需要,它可以用于相机和画廊。对于下面的例子,你需要安装版本:“React Native图像选取器”:“^3.3.2”,
https://www.npmjs.com/package/react-native-image-picker
Android的权限:
wooyq4lh4#
目前,
react-native-camera
已弃用,如果您希望实现本机性能并获得功能支持,https://github.com/mrousavy/react-native-vision-camera是不错的选择https://mrousavy.com/react-native-vision-camera/docs/guides