Global AwesomeAlert на React-нативный - PullRequest
Новая
       25

Global AwesomeAlert на React-нативный

0 голосов
/ 06 января 2020

Я хочу вызывать мое оповещение везде, где я нахожусь в моей программе, поэтому мне нужно сделать компонент.

Что я хочу и проблема: мне нужно оповещение почти на всех страницах, но я не могу используйте избыточность, потому что я не буду выводить предупреждение везде, когда он звонит только на 1 странице.

Проблема: я импортирую свой компонент, я не могу установить состояние этого компонента.

это рендер моего компонента Alert: 

     render() {
 const {showAlert} = this.state;
 return (
     <AwesomeAlert
        show={showAlert}
        showProgress={false}
        title="Attention"
        message= {this.messageAlert}
        closeOnTouchOutside={true}
        closeOnHardwareBackPress={false}
        showCancelButton={true}
        cancelText="Ok"
        cancelButtonColor="#798078"
        messageStyle = {styles.alertMessageStyle}
        titleStyle = {styles.alertTitleStyle}
        onCancelPressed={() => {
          this.hideAlert();
        }}
      />
 );

}

Now Конструктор и функция: 

  constructor(props){
      super(props);
          this.messageAlert = 'Caliss'
      this.state={
          showAlert: false
      }
  }

  showAlert = () => {
  this.setState({
    showAlert: true
  });
};

hideAlert = () => {
  this.setState({
    showAlert: false
  });
};

Render В моем текущем файле: 

render() {
  <TouchableOpacity style={styles.button}>
                   <Text style={styles.buttonText} onPress={this._verifyExistUser} >Login</Text>
  </TouchableOpacity>
<Alert/>
}

Моя функция для проверки пользователя В моем текущем файле и вызова предупреждения, если у него есть ошибка: 

_verifyExistUser(){
 if(this.state.user == ''){
   //alert("Vous devez obligatoirement entré un nom d'utilisateur ou votre courriel");
   this.messageAlert = "Vous devez obligatoirement entré un nom d'utilisateur ou votre courriel"
   this.props.showAlert();
 }
 else if(this.state.password == '') {
   this.messageAlert = "Vous devez obligatoirement entré un mot de passe"
   this.showAlert();
 }
 else {
   alert(this.state.user);
 }

}

Проблема: This.showAlert не является функцией ... undefined.

1- Я не могу экспортировать эту функцию, мне нужно состояние "showAlert"

2- Если у меня есть состояние showAlert, он не будет отображаться, потому что это .showAlert - это состояние компонента.

Что я могу сделать, чтобы импортировать мой компонент в каждый файл, который мне нужен, и вызвать мою функцию ns showAlert и hideAlert, чтобы установить состояние в моем текущем файле?

Спасибо!

1 Ответ

0 голосов
/ 06 января 2020

Я думаю, вам нужно использовать React Hooks. установите это оповещение в вашем root файле, например, в App. js, и выполните рендеринг оттуда. изменить его состояние, используя реагирующие крючки.

...