如何在react-native中重叠ActivityIndi??cator？

发布时间：2020-12-15 20:55:40 所属栏目：百科来源：网络整理

导读：我有一个带有少量表单元素和一个按钮的视图(TouchableHighlight)。单击该按钮时，活动指示器应显示为现有视图的叠加层。活动指示器应在页面中居中，现有视图应略微模糊以指示叠加。我尝试了不同的选择，但无法让它发挥作用。 render() { const { username,pa

我有一个带有少量表单元素和一个按钮的视图(TouchableHighlight)。单击该按钮时，活动指示器应显示为现有视图的叠加层。活动指示器应在页面中居中，现有视图应略微模糊以指示叠加。我尝试了不同的选择，但无法让它发挥作用。

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居中。

要使其工作，您需要绝对定位它，并在叠加层下面的元素之后渲染它：

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

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

确保它最后呈现，因此它优先。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!