html - 为什么top是: 0 for absolute component not working in react native?

Question

我有一个 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
    }
});

这是它目前在我的应用中的样子:

Answer 1

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

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