web-dev-qa-db-fra.com

Comment superposer ActivityIndicator dans react-native?

J'ai une vue avec quelques éléments de formulaire et un bouton (TouchableHighlight). En cliquant sur le bouton, un indicateur d'activité doit être affiché en superposition 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 ne pouvais pas 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
    },
});

J'ai besoin d'un ActivityIndicator dans la vue ci-dessus, superposez la vue et centrez ActivityIndicator.

react-native
37
vijayst

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

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

Ensuite, composez-le simplement dans la méthode 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 afin qu'il ait la priorité.

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

71
G0dsquad

Voici un exemple complet d'utilisation de l'application native react react.

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'
        }
    })
13
ykay

Une bibliothèque est disponible pour ce répertoire rea-native-loading-spinner-overlay .

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

et peut 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}
/>

 enter image description here  enter image description here

0
snehal agrawal

Je suppose que vous devriez utiliser Modal pour superposer un 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>
0
Sanaur Rahman