Question

我有一个SearchBar组件，我需要在ScrollView组件上方朝向屏幕顶部（在标题下）。目前，它并没有出现在顶部，即使我有绝对定位和顶部：0设置就可以了。有谁知道如何实现这个目标？

这是渲染：

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

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

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

以下是样式：

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

}）;

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

以下是我交换ScrollView和SearchBar组件顺序时的样子：

一旦我可以完成绝对定位，最终结果：

这是我的SearchBar代码：

render() {
        const myIcon = (<Icon name="search" size={30} style={styles.searchIcon}/>);
        const slidersIcon = (<Icon name="sliders" size={30} style={styles.slidersIcon}/>);

        return (
            <View style={styles.searchBar}>

                <View style={styles.searchContainer}>
                    <View>
                        {slidersIcon}
                    </View>
                    <View style={styles.search}>
                        <View style={styles.searchSection}>
                            {myIcon}
                            <TextInput
                                style={styles.input}
                                placeholder="Search"
                                placeholderTextColor="rgba(0,0,0,0.7)"
                                onChangeText={(searchString) => {
                                    this.setState({searchString})
                                }}
                                underlineColorAndroid="transparent"
                                editable={true}
                                autoCorrect={false}
                                autoFocus={false}
                                autoCaptialize={'none'}
                                autoCorrect={false}
                                onChangeText={this.onChangeText}
                                enablesReturnKeyAutomatically={true}
                                onFocus={() => this.onFocus()}
                                onBlur={() => this.onBlur()}
                            />
                        </View>
                    </View>
                </View>
                {this.renderSearches()}
            </View>
        );
    }
}

function mapStateToProps(state) {
    const {products} = state;
    return {
        products
    };
}
export default connect(mapStateToProps)(SearchBar);

SearchBar.propTypes = {
    suggestions: PropTypes.array,
    value: PropTypes.string,
    onChangeText: PropTypes.func,
    suggestionsWrapperStyle: PropTypes.any,
    suggestionStyle: PropTypes.any,
    suggestionTextStyle: PropTypes.any,
    style: PropTypes.any,
    inputStyle: PropTypes.any
}

var styles = StyleSheet.create({

    searchBar: {
        display: 'flex',
        backgroundColor: '#fff',
        shadowOpacity: 1,
        shadowOffset: {height: 2, width: 0},
        shadowColor: '#000',
        shadowRadius: 4,
        position: 'relative',
        height: 500,
        borderColor: 'green',
        borderStyle: 'solid',
        borderWidth: 2,
        flexBasis: 100
    },

    searchContainer: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        padding: 4
    },

    moreActions: {
        color: '#D6D6D6',
        paddingTop: 5,
        paddingBottom: 4,
        paddingLeft: 5,
        paddingRight: 6,
        borderColor: '#D6D6D6',
        borderRightWidth: 1
    },
    search: {
        marginLeft: 5,
        paddingTop: 5,
        paddingBottom: 4,
        paddingLeft: 5,
        paddingRight: 5,
        flex: 1

    },
    searchInput: {
        color: '#000',
        height: '10%'
    },
    searchSection: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
        width: '100%'
    },
    searchIcon: {
        padding: 10,
        color: '#D6D6D6',
        fontSize: 14
    },
    slidersIcon: {
        padding: 10,
        color: '#D6D6D6',
        fontSize: 14
    },
    input: {
        flex: 2,
        paddingTop: 2,
        paddingRight: 10,
        paddingBottom: 2,
        paddingLeft: 0,
        backgroundColor: '#fff',
        color: '#424242',
        width: '100%'
    },
});

Answer 1

你的第一次渲染：

     <View style={styles.wrapper}>
        <ScrollView style={styles.scrollView}>
            <ProductsContainer data={{productsList: { results: products }}}/>
        </ScrollView>
        <SearchBar style={styles.searchBar}/>
    </View>

您的搜索栏组件渲染应如下所示：

        <View style={[{styles.searchBar}, this.props.style]}>
            {some content}
        </View>

您可以在孩子的第一个渲染中应用样式。因为目前只应用styles.searchBar所以没有绝对的。

为什么绝对定位不起作用？

1 个答案: