Wie überlagere ich ActivityIndicator in reaktiv-nativ?

Ich habe eine View mit einigen Formular-Elemente und eine Schaltfläche (TouchableHighlight). Klick auf den button, wird eine Statusanzeige eingeblendet werden soll, wie eine überlagerung der vorhandenen Ansicht. Die Aktivitäten-Anzeige sollte in der Mitte der Seite und der bestehende Ansicht soll etwas unscharf sein, um anzuzeigen, overlay. Ich habe versucht, verschiedene Optionen, aber nicht bekommen konnte es an die Arbeit.

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>
    );
}

Vorhandenen styles:

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
    },
});

Muss ich ein ActivityIndicator zu den oben genannten Anzeigen, die overlay-Ansicht und in der Mitte der ActivityIndicator.

InformationsquelleAutor der Frage vijayst | 2017-05-18

  1. 8

    Hier ist ein vollständiges Beispiel mit create reagieren nativen app.

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

    InformationsquelleAutor der Antwort ykay

Schreibe einen Kommentar