OGeek|极客世界-中国程序员成长平台

标题: ios - 为什么 zIndex 在 React Native 中不起作用？ [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 19:30
标题: ios - 为什么 zIndex 在 React Native 中不起作用？

我一直在尝试在 ScrollView 上使用属性 zIndex，但它似乎不起作用。当我应用 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 尝试不工作，我怎样才能让它按需要工作？

---

Best Answer-推荐答案

根据您的图像，看起来 zIndex 正在按预期工作，ScrollView 在输入上方。但是白色背景没有捕捉到。

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

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

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

关于ios - 为什么 zIndex 在 React Native 中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43460916/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (https://ogeek.cn/)

Powered by Discuz! X3.4