2
votes

La caméra native React n'apparaît pas à l'écran

Je développe une application qui lit les codes QR à l'aide de la caméra react-native, mais l'aperçu de la caméra n'apparaît pas à l'écran.

Je travaille sur react-native 0.57.7 , en utilisant react-native-camera 1.10.0 . J'ai exécuté les commandes suivantes:

npm install react-native-camera --save

react-native link react-native-camera

Voici où j'appelle la caméra dans mon code:

<RNCamera 
              ref={ref => {
                this.camera = ref;
            }}
            defaultTouchToFocus
            mirrorImage={false}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={'We need your permission to use your camera phone'}
            style={{flex: 1}}
            />

La boîte de dialogue d'autorisation s'ouvre et elle montre même un élément de chargement la première fois, j'ouvre l'application, mais l'aperçu de la caméra n'apparaît jamais. Y a-t-il un moyen de l'afficher sur mon application?

EDIT: Je l'ai fait fonctionner! J'ai défini manuellement le style de la caméra:

import React, {Component} from 'react';
import {View, Image, TouchableOpacity, ScrollView} from 'react-native';
import RNCamera from 'react-native-camera';

class profPresencaScreen extends Component{
<View style={{flex: 1}}>
          <RNCamera 
              ref={ref => {
                this.camera = ref;
            }}
            defaultTouchToFocus
            mirrorImage={false}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={'We need your permission to use your camera phone'}
            />
</View>
}

export default profPresencaScreen;

C'est aussi simple que ça! Merci à tous ceux qui ont essayé de vous aider!

javascript react-native react-native-android react-native-camera

5 commentaires

Le lien automatique a-t-il fonctionné avec succès? Avez-vous essayé de le lier manuellement?

Faites-vous des tests sur un appareil ou dans un simulateur?

Le lien automatique fonctionnait, mais comme j'essayais de le lier manuellement, j'ai vu qu'il y avait des commandes qui étaient dupliquées. Je vais le tester à nouveau!

Je teste sur appareil + simulateur, les deux agissent de la même manière

Salut, avez-vous réussi? J'ai aussi le même problème.

3 Réponses :

0
votes

J'ai eu le même problème et la configuration de captureAdio = {false} m'a aidé.

 render() {
    return (
      <Container>     
      <View style={StyleSheet.cameraContainer}>
        <RNCamera
             ref={ref => {
               this.camera = ref;
            }} 
            style = {StyleSheet.preview}
            type={RNCamera.Constants.Type.back}
            flashMode={RNCamera.Constants.FlashMode.on}
            captureAudio={false}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={'We need your permission to use your camera phone'}
            onGoogleVisionBarcodesDetected={({ barcodes }) => {
              console.log(barcodes)
            }}
        />
          <Button style = {StyleSheet.capture} 
                  full info large onPress={() => this.takePicture()}>
              <Text> Take picture </Text>
          </Button>                 
      </View>
      </Container>
    );
  }

0 commentaires

1
votes

Avez-vous configuré les autorisations dans le fichier info.plist?

D'après la documentation: https://github.com/react-native-community/react -native-camera

Avec iOS 10 et supérieur, vous devez ajouter la clé "Confidentialité - Description de l'utilisation de la caméra" à l'Info.plist de votre projet. Cela devrait être trouvé dans 'votre_projet / ios / votre_projet / Info.plist'. Ajoutez le code suivant: NSCameraUsageDescription Votre message à l'utilisateur lors du premier accès à la caméra

NSPhotoLibraryUsageDescription Votre message à l'utilisateur lorsque vous accédez pour la première fois à la photothèque

NSMicrophoneUsageDescription Votre message à l'utilisateur lorsque vous accédez au microphone pour la première fois Sur Android, vous avez besoin de buildToolsVersion de 25.0.2+. Cela devrait être facilement et automatiquement téléchargé par le gestionnaire de SDK d'Android Studio.

Sur iOS 11 et versions ultérieures, vous devez ajouter la clé NSPhotoLibraryAddUsageDescription à Info.plist. Cette clé vous permet de décrire la raison pour laquelle votre application demande un accès en écriture seule à la photothèque de l'utilisateur. Info.plist se trouve dans 'votre_projet / ios / votre_projet / Info.plist'. Ajoutez le code suivant:

NSPhotoLibraryAddUsageDescription Votre message à l'utilisateur lorsque vous accédez pour la première fois à la photothèque

0 commentaires

1
votes

vous pouvez utiliser react-native-camera-kit au lieu de react-native-camera .

suivez les étapes ci-dessous.

import { StyleSheet, View, Text, Platform, TouchableOpacity, Linking, PermissionsAndroid } from 'react-native';

import { CameraKitCameraScreen, } from 'react-native-camera-kit';

export default class App extends Component {
  constructor() {

    super();

    this.state = {

      QR_Code_Value: '',

      Start_Scanner: false,

    };
  }

  openLink_in_browser = () => {

    Linking.openURL(this.state.QR_Code_Value);

  }

  onQR_Code_Scan_Done = (QR_Code) => {

    this.setState({ QR_Code_Value: QR_Code });

    this.setState({ Start_Scanner: false });
  }

  open_QR_Code_Scanner=()=> {

    var that = this;

    if (Platform.OS === 'android') {
      async function requestCameraPermission() {
        try {
          const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.CAMERA, {
              'title': 'Camera App Permission',
              'message': 'Camera App needs access to your camera '
            }
          )
          if (granted === PermissionsAndroid.RESULTS.GRANTED) {

            that.setState({ QR_Code_Value: '' });
            that.setState({ Start_Scanner: true });
          } else {
            alert("CAMERA permission denied");
          }
        } catch (err) {
          alert("Camera permission err", err);
          console.warn(err);
        }
      }
      requestCameraPermission();
    } else {
      that.setState({ QR_Code_Value: '' });
      that.setState({ Start_Scanner: true });
    }
  }
  render() {
    if (!this.state.Start_Scanner) {

      return (
        <View style={styles.MainContainer}>

          <Text style={{ fontSize: 22, textAlign: 'center' }}>React Native Scan QR Code Example</Text>

          <Text style={styles.QR_text}>
            {this.state.QR_Code_Value ? 'Scanned QR Code: ' + this.state.QR_Code_Value : ''}
          </Text>

          {this.state.QR_Code_Value.includes("http") ?
            <TouchableOpacity
              onPress={this.openLink_in_browser}
              style={styles.button}>
              <Text style={{ color: '#FFF', fontSize: 14 }}>Open Link in default Browser</Text>
            </TouchableOpacity> : null
          }

          <TouchableOpacity
            onPress={this.open_QR_Code_Scanner}
            style={styles.button}>
            <Text style={{ color: '#FFF', fontSize: 14 }}>
              Open QR Scanner
            </Text>
          </TouchableOpacity>

        </View>
      );
    }
    return (
      <View style={{ flex: 1 }}>

        <CameraKitCameraScreen
          showFrame={true}
          scanBarcode={true}
          laserColor={'#FF3D00'}
          frameColor={'#00C853'}
          colorForScannerFrame={'black'}
          onReadCode={event =>
            this.onQR_Code_Scan_Done(event.nativeEvent.codeStringValue)
          }
        />

      </View>
    );
  }
}
const styles = StyleSheet.create({

  MainContainer: {
    flex: 1,
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
    alignItems: 'center',
    justifyContent: 'center',
  },
  QR_text: {
    color: '#000',
    fontSize: 19,
    padding: 8,
    marginTop: 12
  },
  button: {
    backgroundColor: '#2979FF',
    alignItems: 'center',
    padding: 12,
    width: 300,
    marginTop: 14
  },
});

Accédez à YourReactNativeProject -> android -> app -> src -> main -> AndroidManifest.xml et ajoutez ci-dessous l'autorisation.

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

Ci-dessous le code associé pour la numérisation de la caméra / du code QR.

1] npm install react-native-camera-kit --save
2] react-native link react-native-camera-kit

0 commentaires