Question

我正在试图弄清楚为什么我不能让章节标题贴在我的React Native <ListView>的顶部，但似乎没有任何帮助。

我很确定我正确地实现了所需的方法renderSectionHeader并且我的dataBlob对象的结构正确 - 我能够让<ListView>渲染得很好，它只是节标题没有坚持......

有人能看到一些我忽略的明显事物吗？

根组件：

import React, { Component } from 'react';
import {
  View
} from 'react-native';

import { connect } from 'react-redux';

import {
  Container,
  Header,
  Content
} from 'native-base';
import TabFooter from '../../Components/Footer';
import ListViewWithSections from '../../Components/ListViewWithSections';

class Accommodation extends Component {
  componentWillMount() {
    // function that structures data into something suitable for ListView
    const formatDataForListView = accommodation => {
      const dataBlob = {};
      const sectionIDs = [];
      const rowIDs = [];
      let sectionID = -1;

      accommodation.forEach((accom) => {
        sectionID++;
        sectionIDs.push(accom.id);
        dataBlob[accom.id] = accom.name;
        rowIDs[sectionID] = []; // initialise empty array associated with Section ID
        accom.guests.forEach((guest) => {
          rowIDs[sectionID].push(guest.id);
          dataBlob[accom.id + ':' + guest.id] = guest;
        });
      });

      console.log('dataBlob: ', dataBlob);
      console.log('sectionIDs: ', sectionIDs);
      console.log('rowIDs: ', rowIDs);

      return { dataBlob, sectionIDs, rowIDs };
    };

    const { accommodation } = this.props;
    const { dataBlob, sectionIDs, rowIDs } = formatDataForListView(accommodation);
    this.setState({ dataBlob, sectionIDs, rowIDs });
  }

  render() {
    return (
      <Container>
        <Header />
        <Content>
          <ListViewWithSections
            dataBlob={this.state.dataBlob}
            sectionIDs={this.state.sectionIDs}
            rowIDs={this.state.rowIDs}
          />
        </Content>
        <View>
          <TabFooter />
        </View>
      </Container>
    );
  }
}

const mapStateToProps = state => {
  return { accommodation: state.accommodation };
};

export default connect(mapStateToProps)(Accommodation);

ListViewWithSections.js：

import React, { Component } from 'react';
import {
  ListView,
  Row,
  Text,
  View
} from 'react-native';

class ListViewWithSections extends Component {
  constructor(props) {
    super(props);

    const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
    const getRowData = (dataBlob, sectionID, rowID) => dataBlob[sectionID + ':' + rowID];

    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
      getSectionData,
      getRowData
    });

    const { dataBlob, sectionIDs, rowIDs } = this.props;
    console.log('RowIDs new: ', rowIDs);
    this.state = {
      dataSource: ds.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)
    };
  }

  render() {
    console.log('ListView this: ', this);
    const renderRow = (data) => {
      return (
        <View>
          <Text>{data.name}</Text>
        </View>
      );
    };

    const renderSectionHeader = (sectionData, sectionID) => {
      console.log('sectionData: ', sectionData);
      console.log('sectionID: ', sectionID);
      return (
        <View>
          <Text style={{ fontWeight: '700' }}>{sectionData}</Text>
        </View>
      );
    };

    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={renderRow}
        renderSectionHeader={renderSectionHeader}
      />
    );
  }
}

export default ListViewWithSections;

Answer 1

我从this comment发现了一个问题，其中有人想要没有粘性标题，如果RootQuery Spaces + ... Other Layers + Project + Edge Tasks + Edge SubTasks + Edge Assigned User嵌套在<ListView>内，则粘性标题不会粘贴。< / p>

我一直使用NativeBase作为构建应用UI的基础，我相信<ScrollView>组件继承自<Content>。

无论如何，当我从<ScrollView>和<Content>组件中取出时，粘性标头可以正常工作。

React Native - 无法在ListView中获取段标题

1 个答案: