zIndex가 React Native에서 작동하지 않는 이유는 무엇입니까?

Question

zIndex을 ScrollView에 사용하려고 시도했지만 작동하지 않는 것 같습니다. 내가 zIndex를 적용하는 경우는 다음과 같습니다 당신이 볼 수 있듯이

가의 ScrollView가 입력에 의해 차단되고있다. zIndex과 함께 제안이 올 때 ScrollView이 다른 입력을 완전히 덮는 효과를 원합니다. 여기에 내가 지금 가지고있는 작업은 다음과 같습니다 Input 특정 TextInput 렌더링 별도의 구성 요소입니다

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

하는 것으로. 또한, this.renderPrediction 반환이 : 마침내 여기

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

그리고 내 스타일이다 :

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" 
    } 
}); 

왜하지 않습니다 내 zIndex 시도 노력하고 내가 원하는대로 작동하는 방법을 얻을 수 있나요?

Answer 1

이미지에 따르면 zIndex이 예상대로 작동하고있는 것 같습니다. ScrollView은 입력 된 것입니다. 그러나 흰색 배경은 잡히지 않았습니다.

항목 뒤에있는 배경색은 contentContainerStyle을 사용하십시오.

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

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