• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

[复制链接]
菜鸟教程小白 发表于 2022-12-11 19:30:17 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

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

enter image description here

如您所见,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/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap