Comment superposer ActivityIndicator dans react-native ?

Question

J'ai une vue avec quelques éléments de formulaire et un bouton (TouchableHighlight). En cliquant sur le bouton, un indicateur d'activité doit s'afficher en surimpression de la vue existante. L'indicateur d'activité doit être centré dans la page et la vue existante doit être légèrement floue pour indiquer la superposition. J'ai essayé différentes options mais je n'ai pas réussi à le faire fonctionner.

render() {
    const { username, password } = this.state;

    return (
        <View style={styles.container}>
            <View style={styles.group}>
                <Text style={styles.text}>Username:</Text>
                <TextInput
                    style={styles.input}
                    onChangeText={this.handleUserNameChange.bind(this)}
                    value={username}
                    underlineColorAndroid="transparent"
                />
            </View>
            <View style={styles.group}>
                <Text style={styles.text}>Password:</Text>
                <TextInput
                    style={styles.input}
                    secureTextEntry={true}
                    onChangeText={this.handlePasswordChange.bind(this)}
                    value={password}
                    underlineColorAndroid="transparent"
                />
            </View>
            <TouchableHighlight
                style={styles.button}
                onPress={this.handleLogin.bind(this)}>
                <Text style={styles.buttonText}>Logon</Text>
            </TouchableHighlight>
        </View>
    );
}

Styles existants :

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        marginTop: 60
    },
    group: {
        alignItems: 'flex-start',
        padding: 10
    },
    input: {
        width: 150,
        padding: 2,
        paddingLeft: 5,
        borderColor: 'gray',
        borderWidth: 1
    },
    text: {
        padding: 0
    },
    button: {
        width: 150,
        backgroundColor: '#2299F2',
        padding: 15,
        marginTop: 20,
        borderRadius: 5
    },
    buttonText: {
        textAlign: 'center',
        color: '#fff',
        fontSize: 24
    },
});

Je dois ajouter un indicateur d'activité à la vue ci-dessus, superposer la vue et centrer l'indicateur d'activité.

Answer 1

Pour que cela fonctionne, vous devez absolute le positionner, et le rendre après les éléments qui doivent se trouver sous la superposition :

  loading: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'
  }

Il suffit ensuite de le composer dans le render de manière conditionnelle, en fonction d'un état de chargement. Je vais supposer que this.handleLogin définit déjà une sorte d'état de chargement.

Assurez-vous qu'il est rendu en dernier pour qu'il ait la priorité.

...
{this.state.loading &&
    <View style={styles.loading}>
      <ActivityIndicator size='large' />
    </View>
}

Answer 2

Voici un exemple complet de création d'une application react native.

import React from 'react';
import {StyleSheet, ActivityIndicator, View} from "react-native";

export default class Example extends React.Component {

    constructor(props) {
        super(props);

        this.state = {}

    render() {
        return (
            <View
                style={{flex: 1}}
            >
                  //Add other content here
                  {this.state.loading &&
                  <View style={styles.loading}>
                      <ActivityIndicator/>
                  </View>
                  }
                </View>
            );
        }
    }

    showLoading() {
       this.setState({loading: true})
    }

    hideLoading() {
       this.setState({loading: false})
    }

    const styles = StyleSheet.create({
        loading: {
            position: 'absolute',
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            opacity: 0.5,
            backgroundColor: 'black',
            justifyContent: 'center',
            alignItems: 'center'
        }
    })

Answer 3

Il existe une bibliothèque disponible pour cela react-native-loading-spinner-overlay . Vous pouvez simplement l'installer en utilisant

npm install react-native-loading-spinner-overlay --save

et vous pouvez l'importer dans votre projet en utilisant

import Spinner from 'react-native-loading-spinner-overlay';

Voici comment l'utiliser

<Spinner
  //visibility of Overlay Loading Spinner
  visible={this.state.loading}
  //Text with the Spinner 
  textContent={'Loading...'}
  //Text style of the Spinner Text
  textStyle={styles.spinnerTextStyle}
/>

Answer 4

Je suppose que vous devriez utiliser Modal pour superposer l'indicateur d'activité. Voici un exemple :

<Modal
transparent={true}
animationType={'none'}
visible={loading}
onRequestClose={() => {console.log('close modal')}}>
<View style={styles.modalBackground}>
<View style={styles.activityIndicatorWrapper}>
<ActivityIndicator
animating={loading} />
</View>
</View>
</Modal>