web-dev-qa-db-fra.com

Comment accéder à la caméra - React Native

Cela devrait être inclus dans les API réactives natives, mais je n'arrive pas à trouver une API incluse prête à l'emploi. 

Je veux ouvrir la caméra en un clic. Je peux voir certaines API uniquement pour iOS, mais réagir en natif devrait rendre les choses multi-plateformes.

Est-ce que quelqu'un sait comment accéder à la caméra (pas à la galerie) en utilisant react-native?

androidiosreact-native
13
Virk Bilal

Vous pouvez utiliser le module react-native-camera pour cela.

Voici un exemple d'utilisation de la bibliothèque:

'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);
10
Trishant Pahwa

J'ai essayé de nombreuses options pour l'appareil photo et, selon mon expérience, vous pouvez utiliser le kit de caméra-native-camera qui est alimenté par Wix . Voici mon code

import React from 'react';
import { StyleSheet, Text, View, Alert, ActivityIndicator, PermissionsAndroid } from 'react-native';
import { CameraKitCameraScreen } from 'react-native-camera-kit';

export default class App extends React.Component {
  state = {isPermitted:false}
  constructor(props) {
    super(props);
    var that=this;
    async function requestCameraPermission() {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.CAMERA,{
            'title': 'CameraExample App Camera Permission',
            'message': 'CameraExample App needs access to your camera '
          }
        )
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          requestExternalWritePermission();
        } else {
          alert("CAMERA permission denied");
        }
      } catch (err) {
        alert("Camera permission err",err);
        console.warn(err)
      }
    }
    async function requestExternalWritePermission() {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,{
            'title': 'CameraExample App External Storage Write Permission',
            'message': 'CameraExample App needs access to Storage data in your SD Card '
          }
        )
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          requestExternalReadPermission();
        } else {
          alert("WRITE_EXTERNAL_STORAGE permission denied");
        }
      } catch (err) {
        alert("Write permission err",err);
        console.warn(err)
      }
    }
    async function requestExternalReadPermission() {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,{
            'title': 'CameraExample App Read Storage Write Permission',
            'message': 'CameraExample App needs access to your SD Card '
          }
        )
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          that.setState({isPermitted:true})
        } else {
          alert("READ_EXTERNAL_STORAGE permission denied");
        }
      } catch (err) {
        alert("Read permission err",err);
        console.warn(err)
      }
    }
    requestCameraPermission();
  }

  onBottomButtonPressed(event) {
    const captureImages = JSON.stringify(event.captureImages);
    Alert.alert(
      event.type,
      captureImages,
      [{ text: 'OK', onPress: () => console.log('OK Pressed') }],
      { cancelable: false }
    );
  }

  render() {
    if(this.state.isPermitted){
      return (
        <CameraKitCameraScreen
          actions={{ rightButtonText: 'Done', leftButtonText: 'Cancel' }}
          onBottomButtonPressed={event => this.onBottomButtonPressed(event)}
          flashImages={{
            on: require('./assets/flashon.png'),
            off: require('./assets/flashoff.png'),
            auto: require('./assets/flashauto.png'),
          }}
          cameraFlipImage={require('./assets/flip.png')}
          captureButtonImage={require('./assets/capture.png')}
        />
      );
    }else{
      return (  
        <ActivityIndicator />
      )
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
0
snehal agrawal