Question

我使用新的API <SectionList/>来构建列表用户界面，但我发现Android设备上运行的问题。

使用SectionList向下滚动时，一次只能显示几个新的单元格/行。您需要再次向下滚动SectionList以显示下一个新的单元格/行，并等待下一个单元格准备好显示。它在iOS上的工作方式不同。
当到达SectionList中的最后一项时，我尝试快速向上滚动到SectionList中的第一项，并显示一个空白视图，几秒钟后才会渲染单元格。

我有一百行（国家/地区列表）供显示，用户体验不好。用户需要很长时间才能到达国家/地区列表中的最后一项，并且在快速向上滚动后需要几秒钟才能显示之前的行。

export default class LoginCountryList extends React.Component {

  props: LoginCountryListProps;
  static defaultProps = {
    data: {},
  };

  renderRow = (rowItem: any) => {
    console.log('render row:');
    return (
      <TouchableHighlight
        onPress={() => this.props.onSelectRow(rowItem.item)}
      >
        <View style={styles.row}>
          <Text style={styles.rowLeftText}>{rowItem.item.name}</Text>
          <Text style={styles.rowRightText}>{`+${rowItem.item.ccc}`}</Text>
        </View>
      </TouchableHighlight>
    )
  };

  renderSectionHeader = (sectionItem: any) => (
    <View
      style={styles.sectionHeader}
    >
      <Text style={styles.sectionHeaderText}>{sectionItem.section.title}</Text>
    </View>
  );

  render() {

    console.log('re-render section list')
    return (
      <View style={styles.container}>
        <NavigationBar.TextStyle
          title={title}
          leftText={leftText}
          onLeft={this.props.onBack}
        />
        <SectionList
          style={styles.listView}
          sections={this.props.data}
          renderItem={this.renderRow}
          renderSectionHeader={this.renderSectionHeader}
        />
      </View>
    );
  }
}

// data:

const data = [
  // first section
  {
    "title": "A",
    "key": "A",
    "data": [
      // first row
      {
        "ccc": "93",
        "countryCode": "AF",
        "currencyCode": "AFN",
        "currencySymbol": "؋",
        "name": "Afghanistan",
        "key": "AF"
      },
      {
        "ccc": "355",
        "countryCode": "AL",
        "currencyCode": "ALL",
        "currencySymbol": "Lek",
        "name": "Albania",
        "key": "AL"
      },
      ...
    ]
  },
  ...
]

我在renderItem显示时尝试登录SectionList回调，并且在第一部分只显示15行时调用了renderItem一百次。

当SectionList显示时，记录一个常量字符串render row:一百次：

在显示SectionList时记录项目的索引。当SectionList显示时，同一行确实渲染了多次。

错误地使用SectionList了吗？我该怎么做才能解决它？

环境

react-native -v：0.45.1＆amp; 0.46.1（试过两个版本）
node -v：v7.8.0
npm -v：4.2.0
yarn --version（如果您使用纱线）：0.22.0
目标平台（例如iOS，Android）：Android
开发操作系统（例如macOS Sierra，Windows 10）：macOS
构建工具（Xcode或Android Studio版本，iOS或Android SDK版本，如果相关）：Android SDK 25.0.2

<sectionlist>中的单元格/行在Android上加载缓慢

环境

0 个答案: