如何在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到上面的视图中，将视图覆盖，然后将ActivityIndi​​cator居中.

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

推荐答案

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

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屋！