在react-native中添加了一个绝对定位的透明视图,以便在调用aprc 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图像将出现在覆盖上方
1条答案
按热度按时间uwopmtnx1#
发生这种情况的原因是React组件树是如何呈现的,因为你在Input字段和Button之上显示了覆盖,它们仍然在Overlay之上,你需要做的就是将Overlay从顶部移动到底部。
字符串