为什么zIndex在React Native中工作？

Question

我一直试图在ScrollView上使用该属性zIndex，但它似乎无法正常工作。当我申请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

为什么我的{{1}}尝试无法正常工作？如何才能让它按预期工作？

Answer 1

根据您的图片，zIndex看起来像预期的那样工作，ScrollView超出了输入。但白色背景没有捕获。

使用contentContainerStyle作为项目背后的背景颜色。

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

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