Абсолютно позиционированный вид не работает как оверлей в реагирующем - PullRequest
Новая
       8

Абсолютно позиционированный вид не работает как оверлей в реагирующем

1 голос
/ 15 октября 2019

Добавлен абсолютно позиционированный прозрачный вид в Reaction-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 изображения будут отображаться над оверлеем

1 Ответ

1 голос
/ 15 октября 2019

Причина, по которой это происходит, заключается в том, как отображается дерево компонентов 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>
...