爲什麼zIndex在React Native中不工作？

我一直在嘗試使用ScrollView上的屬性zIndex，但它似乎沒有工作。當我申請zIndex它看起來像這樣：爲什麼zIndex在React Native中不工作？

正如你所看到的，ScrollView被封鎖的輸入。我想要ScrollView在提出建議時完全覆蓋其他輸入的效果，其中zIndex。這就是我現在所擁有的：

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

注意Input是一個獨立的組件，使特定TextInput。此外，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嘗試工作，我怎樣才能得到所期望它的工作？

來源

2017-04-17 Li357

根據您的圖像，它看起來像zIndex正在按預期工作，ScrollView是輸入。但是白色背景沒有得到。

使用contentContainerStyle作爲項目背後的背景顏色。

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

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

來源

2017-04-18 08:00:39

對不起，遲到的迴應，但這是行不通的。 IIRC，我已經嘗試過了，zIndex（雖然它似乎在工作）不是，如下所示：http://imgur.com/a/o3lwS – Li357

它確實有效，它隱藏了'TextInput文字。但是由於某種原因，它看起來像'TextInput'中的Android下劃線不受zIndex影響。我將它設置爲透明（'underlineColorAndroid ='rgba（0,0,0,0）''）並用'borderBottom'重新創建它。 –

但我不在Android上。它沒有隱藏輸入文本，它仍然可見。輸入下的下劃線仍然可見。 – Li357

爲什麼zIndex在React Native中不工作？

回答

相關問題