4
votes

Comment accorder l'accès à la caméra native react après avoir appuyé d'abord sur Ne pas autoriser?

Au début, lorsque vous exécutez l'application pour la première fois et que vous accédez à la caméra, elle lance le modal Permission sur Android ou iOS avec les options ne pas autoriser et autoriser.

Le package utilisé est react-native- caméra. Il possède une propriété appelée notAuthorizedView que vous pouvez renvoyer à la vue de votre choix. Ce que je veux faire, c'est activer la caméra ou lui accorder l'accès dans notAuthorizedView qui apparaît lorsque vous n'autorisez pas la caméra.

export default class MyCamera extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            uri:''
        };
    }

      render() {
        return (
          <View style={styles.container}>
        <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          style={styles.preview}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.on}
          notAuthorizedView={
            <View>
              <Text>YOU ARE NOT AUTHORIZED TO USE THE CAMERA</Text>
              <Button onPress={()=>{Alert.alert('SET CAMERA STATUS TO READY')}}/>
            </View>
          }
          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>
        );
      }


     goToConcern = () => {
        this.props.navigation.navigate('Concern', {uriPhoto: this.state.uri})
     };

     

  takePicture = async function() {
    if (this.camera) {
      const options = { quality: 0.5, base64: true };
      const data = await this.camera.takePictureAsync(options)
      console.log(data.uri);
      console.log(data);
      this.setState({uri:data.uri})
    }
  };
}

android ios reactjs react-native react-native-camera

0 commentaires

3 Réponses :

3
votes

Réponse courte que vous ne pouvez pas, ce que les applications doivent faire est d'inviter l'utilisateur à modifier le paramètre et de fournir un bouton qui redirige vers les paramètres de l'application.

Vous pouvez le faire comme ceci:

Linking.openURL('app-settings:')

5 commentaires

Oui. Imaginez que je dispose des paramètres de l'application, alors dans ces paramètres, comment autoriser l'accès à la caméra à l'aide de react-native-camera?

Je faisais référence aux paramètres du système iOS et non à votre application.

Oui, je l'ai fait correctement et cela a très bien fonctionné! Merci pour l'aide

J'obtiens cette erreur en utilisant le code ci-dessus: - Rejet de promesse non gérée possible (id: 0): Erreur: Impossible d'ouvrir l'URL 'app-settings:'

J'ai utilisé Linking.openSettings () à la place. reactnative.dev/docs/linking#opensettings

0
votes

il existe une solution de contournement pour Android, vous utilisez cette api , et dans votre bouton notAuthorizedView onPress, vous vérifiez si la caméra est autorisée, sinon vous la demandez manuellement. Cependant, vous devez ajouter une méthode pour empêcher l'utilisateur de spammer le bouton, car il affichera une option "ne plus demander", si l'utilisateur appuie sur cela, vous devrez les rediriger vers les paramètres et afficher un toast androis en leur donnant les options pour activer la caméra;)

0 commentaires

0
votes

Puisqu'il existe déjà un ensemble de références au composant RNCamera, il vous suffira d'appeler une méthode à partir de l'instance du composant RNCamera. La méthode est appelée refreshAuthorizationStatus () qui retourne une Promise, et appelez simplement cette fonction lorsque vous accordez l'autorisation de la caméra à partir de notAuthorizedView. J'espère que cela vous aidera.

render() {
    return (
       ...
       <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          ...
          notAuthButtonorizedView={
            <View>
              <Text>YOU ARE NOT AUTHORIZED TO USE THE CAMERA</Text>
              < onPress={async ()=>{
                 await ask_for_permission();
                 await this.camera.refreshAuthorizationStatus() <-- something like this
              }}/>
            </View>
          }
          ...
        />
        ...
    );
}

0 commentaires