web-dev-qa-db-fra.com

Afficher le chargeur lorsque le bouton est cliqué dans React Native

J'essaie d'implémenter l'animation du chargeur dans mon application native de réaction, mais elle ne déclenche pas le chargeur lorsque le bouton est cliqué, bien que l'animation change déjà en true.

Consultez mon code ci-dessous.

componentWillMount(){
    this.hideLoader();
}

showLoader = () => { this.setState({ showLoader:true }); };
hideLoader = () => { this.setState({ showLoader:false }); };

doSignup = () => {
    this.showLoader();
}

render() {
    console.log(this.state.showLoader);
    return (
        <View>
            <TouchableOpacity style={{ marginTop: 25 }} onPress={this.doSignup}>
              <View style={[ styles.button, { backgroundColor: '#5a0060' } ]}>
                <Text style={{ fontSize: 20, color: Colors.white }}>Sign Up Now</Text>
              </View>
            </TouchableOpacity>

            <View style={{ position: 'absolute', top: 0, bottom: 0, right: 0, left: 0 }}>
              <ActivityIndicator animating={this.state.showLoader} size="small" color="#00ff00" />
            </View>
        </View>
    );
}

Lorsque l'écran est chargé, j'ai défini l'animation du chargeur sur false. Lorsque le bouton est cliqué, définissez uniquement sur true qui devrait pouvoir animer le chargeur, mais il n'apparaît pas.

javascriptreactjsreact-nativeloader
5
Leon

J'ai essayé de simplifier votre code en son squelette logique. J'espère que cela fonctionnera et que vous pourrez commencer à ajouter du style, etc.

export default class LoginButton extends Component {
  state = {
    isLoading: false
  };

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

  render() {
    return (
      <View>
        <TouchableOpacity onPress={this.showLoader}>
          <Text>Sign Up Now</Text>
        </TouchableOpacity>
        <ActivityIndicator animating={this.state.isLoading} />
      </View>
    );
  }
}
2
gazdagergo

J'ai apporté quelques corrections à votre code existant.

Je mentionne ici quelques changements clés:

  1. Voir la structure

  2. Position dans la vue des indicateurs d'activité

    constructor(props) {
  super(props);
  this.doSignup = this.doSignup.bind(this);
  this.state = {
    showLoader:false
  }
}
  showLoader = () => { this.setState({ showLoader:true }); };
  hideLoader = () => { this.setState({ showLoader:false }); };

 doSignup(){
   this.showLoader();
 }
render() {
  return (
     <View style={{flex:1}}>
        <TouchableOpacity style={{ marginTop: 25 }} onPress={this.doSignup}>
          <View style={[ styles.button, { backgroundColor: '#5a0060' } ]}>
           <Text style={{ fontSize: 20, color: "white" }}>Sign Up Now</Text>
        </View>
       </TouchableOpacity>

    <View style={{ position: 'absolute', top:"50%",right: 0, left: 0 }}>
      <ActivityIndicator animating={this.state.showLoader} size="large" color="red" />
    </View>
</View>
  );
 }
0
VISHAL RAWAT

Le problème est lié à la position de ActivityIndicator.

Essayez de supprimer le style de la vue Conteneur, le chargeur sera visible.

  <View>
     <ActivityIndicator animating={this.state.showLoader} size="small" 
        color="#00ff00" />
   </View>
0
Deepak