如何访问摄像头- React Native
如何访问摄像头- React Native
提问于 2017-07-24 03:27:34
这应该包含在react原生API中，但是我似乎找不到任何开箱即用的API。
我想按一下按钮就打开相机。我可以看到一些只针对iOS的API，但是react-native应该是跨平台的。
有人知道如何使用react-native访问相机(而不是图库)吗？
回答 3
Stack Overflow用户
发布于 2017-07-24 03:36:52
为此，您可能希望使用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);Stack Overflow用户
发布于 2017-12-05 11:41:35
在React Native中，您可以首先使用npm安装摄像头来访问它:npm install react-native-camera --save react-native link react-native-camera
然后在您的组件中使用以下代码：
takePicture() {
const options = {};
//options.location = ...
this.camera.capture({metadata: options})
.then((data) => console.log(data))
.catch(err => console.error(err));
}有关完整示例，请参阅此github代码库：https://github.com/lwansbrough/react-native-camera
Stack Overflow用户
发布于 2021-03-27 19:35:42
我发现react-native-picker图像拾取器非常适合我的需要，它既可以用于相机，也可以用于画廊。对于下面的示例，您需要安装版本："react-native-image-picker"："^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" />
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45269099
复制相关文章
相似问题