为什么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中不工作？

回答

相关问题