绝对定位视图在react-native中不作为覆盖

ruarlubt  于 2023-11-21  发布在  React
关注(0)|答案(1)|浏览(219)

在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图像将出现在覆盖上方

uwopmtnx

uwopmtnx1#

发生这种情况的原因是React组件树是如何呈现的,因为你在Input字段和Button之上显示了覆盖,它们仍然在Overlay之上,你需要做的就是将Overlay从顶部移动到底部。

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

字符串

相关问题