Question

我创建了一个分段列表，但是我无法隐藏标题或任何标题；如图中所示。在我的实际标题下（带有“搜索”后退按钮）下的另一部分没有意义；这是我的代码：

注意我正在使用React Navigation进行导航。我想这可能是因为我想隐藏一个标题框，但我必须隐藏我的导航框，但这是很多工作，对我来说没有意义

import React from 'react';
import GlobalStyle from "../../assets/styles";
import { View, SectionList, Text, StyleSheet, Platform } from 'react-native';
import {createStackNavigator} from "react-navigation";

class SearchResultScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchString: 'Panadol',
            isLoading: false,
            message: '',
            server: null,
            searchReady: true,
            sections: [],
        };
    }

    componentDidMount() {
        this._prepareSectionList(this.props.navigation.getParam('items', []));
    }

    _prepareSectionList = (array) => {
        let sections = array.reduce((acc, item) => {
            const name = item['ProductGroupName'];
            acc[name] = acc[name] || [];
            acc[name].push(item);
            return acc;
        }, {});
        let sectionArray = [];
        console.log(sections);
        for (var key in sections) {
            let data = [];
            for (var item in sections[key]) {
                data.push(sections[key][item].TradeName)
            }
            sectionArray.push({title:key, data: data});
        }
        this.setState({ sections: sectionArray});
    };


    render() {
        const { navigation } = this.props;
        const items = navigation.getParam('items', []);
        return (
            <View style={{ marginTop : (Platform.OS) == 'ios' ? 20 : 0 }}>
                <SectionList
                    sections={
                        //[{title: 'D', data: ['xd','xdzz']},{title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},]
                        this.state.sections
                    }
                    renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
                    renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
                    keyExtractor={(item, index) => index}
                    ListHeaderComponent={null}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    sectionHeader: {
        paddingTop: 2,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(247,247,247,1.0)',
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
});

export default createStackNavigator({
    Screen: SearchResultScreen,
});

Answer 1

通过删除下面的行，您可以删除/隐藏标题。

style = {{marginTop：（Platform.OS）=='ios'吗？ 20：0}}

Answer 2

原来，我正在创建一个“堆栈导航器”，而不是仅正常导出并使用我创建的组件，从而创建了一个新的空标题栏。

当我用createStackNav ...删除导出并用导出默认的SearchResultScreen替换它时，它就可以了！

SectionList渲染标题，无法隐藏/删除

2 个答案: