Question

谢谢你反应原生这么棒的技术:)无论如何，我最近一直在测试一些组件，并在渲染带有节头的列表时发现Android上的ListView组件有一个错误。所谓的标题将被粘贴在内容的顶部，然后由下一个推动不起作用。 iOS等效工作正常。

我在使用react-native-cli 0.29.2的Windows 7 64位上使用react-native 1.0.0。使用23.0.1 android SDK。

我还提供了一个可以测试的示例App here（查看rnplay.org）。该应用程序的版本为0.24.1，但它似乎仍无法正常工作。

根据docs：

renderSectionHeader函数

（sectionData，sectionID）=＆gt;渲染

如果提供，则为此部分呈现粘性标题。粘性的   行为意味着它将滚动与顶部的内容   部分直到它到达屏幕的顶部，此时它将   坚持到顶部，直到它被下一部分推离屏幕   报头中。

但它似乎对我不起作用。这是代码的一部分

class ListViewTest extends Component {

  renderListRowView(rowData) {
    const { state, label, alarm = false } = rowData;

    return (
      <View style={styles.row}>
        <Text style={styles.rowText}>{label}</Text>
      </View>
    );
  }

  renderSectionHeader(data, sectionId) {
    return (
      <View style={styles.subheader}>
        <Text style={styles.subheaderText}>{sectionId}</Text>
      </View>
    );
  }

  getSource() {
    return [{
      name: 'Category 1',
      todos: [{
        state: 'unchecked',
        label: 'Eat Food'
      }, {
        state: 'checked',
        label: 'Eat Food'
      }, {
        state: 'unchecked',
        label: 'Eat Food'
      }, {
        state: 'unchecked',
        label: 'Eat Food'
      }, {
        state: 'unchecked',
        label: 'Eat Food'
      }]
    }, {
      name: 'Categor 2',
        todos: [{
        state: 'checked',
        label: 'Eat Food'
      }, {
        state: 'unchecked',
        label: 'Eat Food'
      }, {
        state: 'checked',
        label: 'Eat Food'
      }, {
        state: 'unchecked',
        label: 'Eat Food'
      }, {
        state: 'unchecked',
        label: 'Eat Food'
      }, {
        state: 'checked',
        label: 'Eat Food'
      }, {
        state: 'unchecked',
        label: 'Eat Food'
      }, {
        state: 'unchecked',
        label: 'Eat Food'
      }]
    }, {
      name: 'Category 3',
      todos: [{
        state: 'unchecked',
        label: 'Go with the flow'
      }, {
        state: 'checked',
        label: 'Go with the flow'
      }, {
        state: 'unchecked',
        label: 'Go with the flow'
      }, {
        state: 'unchecked',
        label: 'Go with the flow'
      }, {
        state: 'unchecked',
        label: 'Go with the flow'
      }]
    }];
  }

  renderListViewData() {
    var data = this.getSource();
    var sectionIds = [];

    data.map((list) => {
      sectionIds.push(list.name);
      data[list.name] = list.todos;
    });

    return {data, sectionIds};
  }

  render() {
    var ds = new ListView.DataSource({
      sectionHeaderHasChanged: (r1, r2) => r1 !== r2,
      rowHasChanged: (r1, r2) => r1 !== r2
    });

    var {data, sectionIds} = this.renderListViewData();

    let dataSource = ds.cloneWithRowsAndSections(data, sectionIds);

    return (
      <View style={{flex: 1}}>
        <ListView
          ref="listview"
          dataSource={dataSource}
          renderRow={this.renderListRowView}
          renderSectionHeader={this.renderSectionHeader}
          automaticallyAdjustContentInsets={false}
          scrollEnabled={true}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent('ListViewTest', () => ListViewTest);

我还提供了一个可以测试的示例App here。该应用程序的版本为0.24.1，但它似乎仍无法正常工作。

任何帮助都会非常感激。期待。谢谢！

Answer 1

您必须使用所有3个参数完成API cloneWithRowsAndSections，它才能正常工作。

Answer 2

尝试使用属性：stickySectionHeadersEnable。它似乎已经解决了 android 设备上的问题，因为我自己在使用 renderSectionHeader 使用 SwipeListView 时遇到了同样的问题。

即使在Android

2 个答案: