为什么是top：0表示绝对组件不能反应原生？

Question

我有一个SearchBar组件，我需要在ScrollView组件上方朝向屏幕顶部（在标题下）。目前，即使我有顶部：它设置为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
    }
});

以下是我目前在我的应用中看到的内容：

Answer 1

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

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

Answer 2

您可以尝试设置宽度（宽度：＆＃39; 100％＆＃39;）并将SearchBar放在主视图之外。

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

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