如何使弹出窗口（警报）只出现一次而不是几次？

Question

我正在使用 react native 进行编码（我是这项技术的新手），并且我创建了一个应该只出现一次的弹出窗口 所以当我按下按钮进入我的应用程序的下一个视图时，弹出窗口会出现（这很好，我想要什么） 我的问题是，当我按下按钮拍照时（基本上这是一个像普通相机一样的视图来拍照enter image description here）弹出窗口出现，当我按下按钮访问前置摄像头时弹出窗口显示也起来 所以基本上它正在工作，但这不是我想要的

总之，当我在这个视图上导航时，我希望弹出窗口只出现一次，当我按下其他按钮时，我不希望弹出窗口出现，这正是我的实际问题

这是我的全部代码：

import { Camera  } from 'expo-camera';
import * as Permissions from 'expo-permissions';
import { FontAwesome, Ionicons, MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
import React from 'react';
import {Alert, StyleSheet, Text, View, TouchableOpacity, AppRegistry} from 'react-native';



import * as MediaLibrary from 'expo-media-library';

export default class Cam extends React.Component {


constructor (props) {
  super (props)

  this.state = {
    hasPermission : null,
    setHasPermission : null,
    type : Camera.Constants.Type.back,
    statut : null,
    hasCamerollPermission: null,
  }
}

takePicture = async () =>  {
  if (this.camera) {
    this.camera.takePictureAsync().then(data => {
      let saveResult = data

        // On demande l'acces à la camera roll
        let access = MediaLibrary.getPermissionsAsync()

        if (access === 'granted') {
          MediaLibrary.createAssetAsync(saveResult.uri) // On sauvegade l'image dans la camera ro
          console.log("Voici le résultat");
          console.log(saveResult)
        }else {
          console.log("Vous n'avez pas accès à cette option ");
          MediaLibrary.requestPermissionsAsync().then(() => {

            console.log("Permission autorisée");
            MediaLibrary.createAssetAsync(saveResult.uri)
            console.log("Voici le résultat");
            console.log(saveResult)
          }).catch((e) => {
            console.log(e);
          })
        }

    });
  }
};

render (){


  return (
<>

    <TouchableOpacity onPress= {Alert.alert(
      'Pour de meilleurs résultats, assurez-vous que le chapeau et le stipe du champignon soient bien visibles'
      )}>

    </TouchableOpacity>

    <View style={{ flex: 1 }}>
      <Camera style={{ flex: 1 }} type={this.state.type}  ref={ref => {this.camera = ref;}}>
        <View
          style={styles.styleCamera1}>
          <TouchableOpacity
            style={styles.styleCamera2}
            onPress={() => {
              console.log("yousri");
              if (this.state.type == Camera.Constants.Type.back) {

                this.setState ({
                  type : Camera.Constants.Type.front
                })
              }else {
                this.setState ({
                  type : Camera.Constants.Type.back
                })
              }

            }}>

            <MaterialIcons
                name="camera-front"
                style={styles.Icons}
            />
          </TouchableOpacity>

            <TouchableOpacity
            style={styles.styleCamera2}
            onPress = {() => {
              //On verifie que la référence est bien donnée (à la caméra)
              var perm =  Camera.requestPermissionsAsync()

              perm.then(() => {
                console.log(".");
                this.setState ( {hasPermission : true} )

                console.log("Prend une photo");
                this.takePicture();

              }).catch ((erreur) => {
                console.log(erreur);
              })
              {this.takePicture.bind(this)}
            } }
            >
            <MaterialIcons
                  name="camera"
                  style={styles.Icons}
                //  borderRadius = {0}

              />

          </TouchableOpacity>
          <TouchableOpacity
          onPress={() => {this.props.navigation.navigate('Galerie')}}
          style={styles.styleCamera2}
          >
          <Ionicons
          name="ios-photos"
          style={styles.Icons}
      />

        </TouchableOpacity>

        </View>
      </Camera>
    </View>
    </>
  )
}
}
const styles = StyleSheet.create({
    styleCamera1:{

        flex: 1,
        backgroundColor: 'transparent',
        flexDirection: 'row',
        justifyContent: 'space-around',
        marginBottom: 20,

    },
    styleCamera2:{

        flex: 0.1,
        alignSelf: 'flex-end',
        alignItems: 'center',

    },
    Icons:{
      color: "#fff",
       fontSize: 45
     }
  })

这是我写警报的指定部分

  return (
<>

    <TouchableOpacity onPress= {Alert.alert(
      'Pour de meilleurs résultats, assurez-vous que le chapeau et le stipe du champignon soient bien visibles'
      )}>

    </TouchableOpacity>

感谢您的帮助

Answer 1

你应该试试：

 <TouchableOpacity onPress= {()=> Alert.alert(
  'Pour de meilleurs résultats, assurez-vous que le chapeau et le stipe du champignon soient bien visibles'
  )}>

</TouchableOpacity>