Curso de React Native - 2018

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

El desarrollo de aplicaciones móviles nos amplia un poco mas la visión, digo esto porque vengo de la programación web, si estas en el mismo caso mio seguro descubrirás que en este nuevo horizonte se involucran algunos recursos que en la web no contemplábamos, como por ejemplo el acceso al almacenamiento del dispositivo o la cámara. Aquí proporciono un tutorial sobre el acceso a la cámara del celular desde mi experiencia, tal vez existan otras formas de hacerlo pero yo encontré esta variante y la comparto con ustedes humildemente:

Paso 1 instalar en nuestro proyecto react-native-camera con uno de los siguientes comando dependiendo del gestor de paquetes que uses:
yarn: yarn add react-native-camera@git+https://git@github.com/react-native-community/react-native-camera.git

npm: npm install --save react-native-camera@git+https://git@github.com/react-native-community/react-native-camera.git

Paso 2: ejecutar react-native link react-native-camera
cambiar en el archivo android/app/build.gradlew

dependencies {
    compile project(':react-native-camera')//<-esta liena cambiar la palabra compile por implementation quedaría de la siguiente manera
    implementation project(':react-native-camera')

Paso 3 En el archivo AndroidManifest.xml agregar las siguientes lineas:

  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.RECORD_AUDIO"/>
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Paso 4: importar el paquete en el fichero donde necesites acceder a la cámara

import Camera from 'react-native-camera';


class MyCamera extends Component {
    async componentDidMount(){
      this.requestCameraPermission() 
    }
    async requestCameraPermission() {
      try {
          const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.CAMERA,
            {
              'title': 'Permiso de la cámara',
              'message': 'La aplicación necesita acceso a tu cámara' +
                         'para que pueda tomar fotos impresionantes.'
            }
          )
          if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            console.log("You can use the camera")
          } else {
            console.log("Camera permission denied")
          }
        } catch (err) {
          console.warn(err)
        }
      }
      takePicture = async function() {
          if (this.camera) {
            const options = { quality: 0.5, base64: true };
            const data = await this.camera.takePictureAsync(options);
            console.log(data.uri);
          }
        }


  render(){
    return (
         <View style={apply.container}>
          <RNCamera
            ref={ref => {
              this.camera = ref;
            }}
            style={apply.preview}
            type={RNCamera.Constants.Type.back}
            flashMode={RNCamera.Constants.FlashMode.on}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={'We need your permission to use your camera phone'}
            onGoogleVisionBarcodesDetected={({ barcodes }) => {
              console.log(barcodes);
            }}
          />
          <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
            <TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}>
              <Text style={{ fontSize: 14 }}> SNAP </Text>
            </TouchableOpacity>
          </View>
        </View>
    )
  }
}

link de referencia:
https://github.com/react-native-community/react-native-camera

Curso de React Native - 2018

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

0 Comentarios

para escribir tu comentario

Artículos relacionados