为什么 top: 0 表示绝对组件在本机反应中不起作用？答案

【问题标题】：Why is top: 0 for absolute component not working in react native?为什么 top: 0 表示绝对组件在本机反应中不起作用？
【发布时间】：2018-04-17 12:57:01
【问题描述】：

我有一个 SearchBar 组件，我需要将它显示在屏幕顶部的 ScrollView 组件上（在标题下）。目前，即使我设置了 top: 0 ，它也没有捕捉到顶部。有谁知道如何做到这一点？

这是渲染：

render() {
    const {isLoading, products} = this.props.products;

    if (isLoading) {
        return <Loader isVisible={true}/>;
    }

    return (<View style={styles.wrapper}>
        <Header/>
        <ScrollView style={styles.scrollView}>
            <ProductsContainer data={{productsList: { results: products }}}/>
        </ScrollView>
        <SearchBar style={styles.searchBar}/>
        <Footer/>
    </View>);
}

以下是样式：

var styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        backgroundColor: '#000',
        position: 'relative'
    },
    searchBar: {
        position: 'absolute',
        zIndex: 100000,
        top: 0
    },
    scrollView: {
        position: 'relative',
        zIndex: 0
    }
});

这是它目前在我的应用中的外观：

【问题讨论】：

检查元素包装器是否真的包装了所有东西，我的意思是它是否从顶部开始。这可能是 searchBar 的引用元素，并且 top 可能与您的预期不同。
你能创建一个小提琴来显示你的问题吗？

标签： html css reactjs react-native

【解决方案1】：

searchBar 样式声明中缺少正确的尺寸和 zIndex。例如，这将按预期呈现：

...
searchBar: {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  height: 44,
  zIndex: 2,
},
...

【讨论】：

我用你的完全替换了我的 searchBar 样式，但它看起来仍然一样。还是不会登顶。

【解决方案2】：

您可以尝试设置宽度（宽度：'100%'）并将您的 SearchBar 放在主视图之外。

<View style={{flex:1}}>
                <SearchBar style={styles.searchBar}/>
                <View style={styles.wrapper}>
                ...

编辑：你用的是虚拟设备吗？我注意到我的不喜欢绝对定位，您可以尝试在真实设备上运行您的代码。

【讨论】：