¿Cómo tomar fotografías con la cámara nativa de expo react?

Solución:

Puede usar “onPictureSaved” cuando la función asincrónica takePictureAsync regresa para que pueda tomar el objeto de la foto:

  takePicture = () => {
      if (this.camera) {
          this.camera.takePictureAsync({ onPictureSaved: this.onPictureSaved });
      }
   };

  onPictureSaved = photo => {
      console.log(photo);
  } 

En la vista, tendría un componente de cámara que tiene una referencia:

<Camera style={styles.camera} type={this.state.type} ref={(ref) => { this.camera = ref }} >

Además de un botón que llamará a la función takePicture al presionar:

<TouchableOpacity style={styles.captureButton} onPress={this.takePicture} />

Por lo tanto, debes decirle a tu ‘ícono de círculo’ que tome la foto. Primero agregaría una referencia a tu cámara así

<Camera style={{ flex: 1 }}
      ref={ (ref) => {this.camera = ref} }
      type={this.state.type}>

luego crea una función que realmente le diga a tu aplicación que tome la foto:

 async snapPhoto() {       
    console.log('Button Pressed');
    if (this.camera) {
       console.log('Taking photo');
       const options = { quality: 1, base64: true, fixOrientation: true, 
       exif: true};
       await this.camera.takePictureAsync(options).then(photo => {
          photo.exif.Orientation = 1;            
           console.log(photo);            
           });     
     }
    }

Ahora haga que su icono tenga un onPress () para tomar la foto. Hice algo como esto.

<TouchableOpacity style={styles.captureButton} onPress={this.snapPhoto.bind(this)}>
                <Image style={{width: 100, height: 100}} source={require('../assets/capture.png')}          
                />
            </TouchableOpacity>

También es posible que desee crear una vista que muestre una vista previa de la imagen o algo similar. La documentación de la Expo tiene un buen ejemplo de cómo empezar. Tenga en cuenta que Expo crea una carpeta en caché llamada ‘Cámara’ y ahí es donde está inicialmente la imagen.

También puede hacer esto en un componente funcional utilizando una referencia creada a través de un React Hook. Aquí hay un ejemplo basado en el componente de cámara expo SDK 38 https://docs.expo.io/versions/v38.0.0/sdk/camera/

import React, { useState, useEffect, useRef } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera } from 'expo-camera';

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [type, setType] = useState(Camera.Constants.Type.back);
  const ref = useRef(null)

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);
  
  _takePhoto = async () => {
    const photo = await ref.current.takePictureAsync()
    console.debug(photo)
  }

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
  return (
    <View style={{ flex: 1 }}>
      <Camera style={{ flex: 1 }} type={type} ref={ref}>
        <View
          style={{
            flex: 1,
            backgroundColor: 'transparent',
            flexDirection: 'row',
          }}>
          <TouchableOpacity
            style={{
              flex: 0.1,
              alignSelf: 'flex-end',
              alignItems: 'center',
            }}
            onPress={() => {
              setType(
                type === Camera.Constants.Type.back
                  ? Camera.Constants.Type.front
                  : Camera.Constants.Type.back
              );
            }}>
            <Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}> Flip </Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={_takePhoto}
          >
            <Text>Snap Photo</Text>
          </TouchableOpacity>
        </View>
      </Camera>
    </View>
  );
}

No verifiqué cómo se ve la interfaz de usuario, pero el punto principal es utilizar React.useRef y adjunte la referencia a su <Camera/> componente. Entonces puedes llamar ref.current.takePictureAsync para capturar y acceder a una nueva imagen. Mire a continuación para ver los fragmentos relevantes importantes para capturar una foto.

import React from 'react'
/* ... other imports
*/

export default CameraScene = () => {
  /* ... other state and permission logic
  */
  const ref = useRef(null)
  const _takePhoto = async () => {
    const photo = await ref.current.takePictureAsync()
    console.debug(photo)
  }
  return (
    <Camera style={{flex: 1}} ref={ref}> /* ...
    ... other ui logic
    */
    </Camera>
  ) 
}

Aprender más acerca de useRef aquí https://reactjs.org/docs/hooks-reference.html#useref)

---

---

Utiliza Nuestro Buscador