在react-native中添加了一个绝对定位的透明视图,以在异步api调用时显示进度加载器。但覆盖层后面的输入和按钮仍然可以按下并做出响应。
<SafeAreaView style={styles.container}>
{this.state.isLoading &&
<View
style={{
position: 'absolute', elevation: 5, backgroundColor: 'rgba(0,0,0,0.3)',
top: 0, bottom: 0, left: 0, right: 0,
zIndex:10
}}
/>
}
<View style={{ flexGrow: 5, flexShrink: 5, flexBasis: 100, alignItems: 'center' }}>
<Image style={{ width: 200, flex: 1 }} source={require('res/images/one.png')} resizeMode='contain' />
</View>
<View style={{ flexGrow: 1, paddingLeft: 30, paddingRight: 30 }}>
<Item regular>
<Input
placeholder="username123"
autoCompleteType="username"
onChangeText={(username) => this.setState({ username })}
value={this.state.username}
/>
</Item>
<Button block onPress={this.onClick}
style={styles.button}>
<Text style={styles.buttonText}>Login</Text>
</Button>
</View>
</SafeAreaView>
PS:没有
elevation:5
按钮出现在覆盖层上方(使用原生按钮/控件)。
没有 zIndex 图像将出现在覆盖层上方
发生这种情况的原因是 React 组件树的渲染方式,因为您在输入字段和按钮上方显示了覆盖层,它们仍然位于覆盖层上方,您需要做的就是将覆盖层从顶部移动到底部。
<SafeAreaView style={styles.container}>
<View style={{ flexGrow: 5, flexShrink: 5, flexBasis: 100, alignItems: 'center' }}>
<Image style={{ width: 200, flex: 1 }} source={require('res/images/one.png')} resizeMode='contain' />
</View>
<View style={{ flexGrow: 1, paddingLeft: 30, paddingRight: 30 }}>
<Item regular>
<Input
placeholder="username123"
autoCompleteType="username"
onChangeText={(username) => this.setState({ username })}
value={this.state.username}
/>
</Item>
<Button block onPress={this.onClick}
style={styles.button}>
<Text style={styles.buttonText}>Login</Text>
</Button>
</View>
{/* Moved below the form */}
{this.state.isLoading &&
<View
style={{
position: 'absolute', elevation: 5, backgroundColor: 'rgba(0,0,0,0.3)',
top: 0, bottom: 0, left: 0, right: 0,
zIndex:10
}}
/>
}
</SafeAreaView>