Pourquoi zIndex ne fonctionne pas dans React Native?

Question

J'ai essayé d'utiliser la propriété zIndex sur un ScrollView mais cela ne semble pas fonctionner. Quand je demande zIndex il ressemble à ceci:

Comme vous pouvez le voir, le ScrollView est bloqué par l'entrée. Je veux l'effet d'avoir le ScrollView complètement couvrir l'autre entrée lorsque les suggestions viennent, avec zIndex. Voici ce que j'ai en ce moment:

<View> 
    <Input 
     value={this.state.inputValue} 
     style={styles._input} 
     inputStyle={styles._text} 
     onChangeText={this.handleChangeText} 
     {...this.props} 
    /> 
    <View style={styles._spacing}></View> 
    {predictions.length ? 
     <ScrollView 
      style={styles._scroll} 
     > 
      {predictions.map(this.renderPrediction)} 
     </ScrollView> 
    : null} 
</View> 

Notez que Input est un composant séparé qui rend un TextInput spécifique. En outre, this.renderPrediction: renvoie cette

<Text 
    style={styles._text} 
    key={index} 
    onPress={this.handlePredictionPress.bind(null, prediction.description)} 
> 
    {prediction.description} 
</Text> 

Et enfin voici mes styles:

const styles = EStyleSheet.create({ 
    input: StyleSheet.flatten([inputStyle]), 
    text: { 
     fontSize: 15, 
    }, 

    spacing: { 
     height: 10 
    }, 

    scroll: { 
     position: "absolute", 
     zIndex: 10, 
     width: "80%", 
     top: 50, 
     backgroundColor: "white" 
    } 
}); 

Pourquoi mon zIndex tentative de travail et comment puis-je faire fonctionner comme vous le souhaitez?

Answer 1

Selon votre image, il semble que le zIndex fonctionne comme prévu, le ScrollView est sur l'entrée. Mais le fond blanc n'a pas attrapé.

Utilisez contentContainerStyle pour la couleur d'arrière-plan derrière les éléments.

<ScrollView style={styles._scroll} contentContainerStyle={styles._contentContainer} > 

... 
contentContainer: {backgroundColor: "white"}