如何在 react-native 中覆盖 ActivityIndi​​cator? [英] How do I overlay ActivityIndicator in react-native?

问题描述

我有一个包含很少表单元素和一个按钮(TouchableHighlight)的视图.单击按钮时，活动指示器应显示为现有视图的叠加.活动指示器应位于页面中央，现有视图应略微模糊以指示叠加.我尝试了不同的选项，但无法使其正常工作.

I have a View with few form elements and a button (TouchableHighlight). On clicking the button, an Activity Indicator should be shown as an overlay to the existing view. The Activity Indicator should be centered within the page and the existing view should be slightly blurred to indicate overlay. I tried different options but could not get it to work.

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

现有样式:

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

我需要一个 ActivityIndi​​cator 到上面的 View，覆盖视图，并将 ActivityIndi​​cator 居中.

I need to an ActivityIndicator to the above View, overlay the view, and center the ActivityIndicator.

推荐答案

要使其正常工作，您需要absolute 定位它，并在之后渲染它应该在叠加层下方的元素:

For this to work, you'd need to absolute position it, and render it after the elements that should be underneath the overlay:

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

然后根据加载状态有条件地将其组合到 render 方法中.我将假设 this.handleLogin 已经设置了某种加载状态.

Then simply compose it into the render method conditionally, based on a loading state. I am going to assume this.handleLogin sets some sort of loading state already.

确保它最后呈现，以便优先.

Make sure it's rendered last so it takes precedence.

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

这篇关于如何在 react-native 中覆盖 ActivityIndi​​cator?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！