ios - 为什么 zIndex 在 React Native 中不起作用？

Question

我一直在尝试在 ScrollView 上使用属性 zIndex 但它似乎不起作用。当我应用 zIndex 时，它看起来像这样:

如您所见，ScrollView 被输入挡住了。当建议出现时，我希望使用 zIndex 使 ScrollView 完全覆盖其他输入。这是我现在拥有的:

<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 尝试不起作用，我怎样才能让它按预期工作？

Answer 1

根据您的图像，zIndex 似乎按预期工作，ScrollView 位于输入上方。但是白色背景没有捕捉到。

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

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

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