V2 version renderSection is called only two times

[jamessawyer]

1. Dev OS (windows/Mac/Linux) Mac
2. Target OS (iOS/Android/Both) iOS
3. Simulator or real device? (Simulator/Real Device/Both) Real Deivce iPhone 6s
4. react-native V0.54.0, react-native-gesture-handler V1.0.8

here is my code

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { LargeList } from "react-native-largelist-v2";
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'
import AlphabetPicker from "./AlphabetPicker";

const countries = require('./countryCode.json');

// console.log('data', countries.data);

let lastLetter = '';

class PhoneCodePicker extends React.Component {

  state = {
    data: countries,
  }

onTapLetter = (letter) => {
  if (lastLetter === letter) return; 
  lastLetter = letter;

  const letterIndex = this.state.data.findIndex(country => country.key.toLowerCase() === letter.toLowerCase());
  console.log('index', letterIndex);
  if (letterIndex > -1) {
    this.listRef.scrollToIndexPath({section: letterIndex, row: 0}, false)
  }
  // this.listRef.scrollToIndexPath({animated: true, itemIndex: index})
}

  render() {

    return (
      <View style={styles.container}>
        <LargeList
          style={styles.container}
          data={this.state.data}
          heightForSection={() => 50}
          renderSection={this._renderSection}
          heightForIndexPath={() => 50}
          renderIndexPath={this._renderIndexPath}
          ref={list => this.listRef = list}
        />
        <View style={styles.sidebar}>
          <AlphabetPicker onTapLetter={this.onTapLetter} />
        </View>
      </View>
    );
  }

  _renderSection = (section) => {
    console.log('section header', section)
    const country = this.state.data[section];
    return (
      <View style={styles.section}>
        <Text>
          {country.key}
        </Text>
      </View>
    );
  };

  _renderIndexPath = ({ section, row }) => {
    console.log('section body', section, row);
    const country = this.state.data[section].items[row];
    return (
      <View style={styles.row}>
        <Text>
          {country.countryName}  +{country.phoneCode}
        </Text>
        <View style={styles.line} />
      </View>
    );
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  section: {
    flex: 1,
    backgroundColor: "gray",
    justifyContent: "center",
    alignItems: "center"
  },
  row: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  line: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
    height: 1,
    backgroundColor: "#EEE"
  },
  sidebar: {
    position: 'absolute',
    right: 0,
    width:  30,
  }
});

export default gestureHandlerRootHOC(PhoneCodePicker)

and some part of countriesJSON:

[
  {
    "items": [
      {
        "countryName": "安道尔",
        "countryPinyin": "an dao er",
        "phoneCode": "376",
        "countryCode": "AD"
      },
      {
        "countryName": "阿拉伯联合酋长国",
        "countryPinyin": "a la bo lian he qiu zhang guo",
        "phoneCode": "971",
        "countryCode": "AE"
      },
      {
        "countryName": "阿富汗",
        "countryPinyin": "a fu han",
        "phoneCode": "93",
        "countryCode": "AF"
      },
      {
        "countryName": "安提瓜和巴布达",
        "countryPinyin": "an ti gua he ba bu da",
        "phoneCode": "1",
        "countryCode": "AG"
      },
      {
        "countryName": "安圭拉",
        "countryPinyin": "an gui la",
        "phoneCode": "1",
        "countryCode": "AI"
      },
      {
        "countryName": "阿尔巴尼亚",
        "countryPinyin": "a er ba ni ya",
        "phoneCode": "355",
        "countryCode": "AL"
      },
      {
        "countryName": "安哥拉",
        "countryPinyin": "an ge la",
        "phoneCode": "244",
        "countryCode": "AO"
      },
      {
        "countryName": "阿根廷",
        "countryPinyin": "a gen ting",
        "phoneCode": "54",
        "countryCode": "AR"
      },
      {
        "countryName": "奥地利",
        "countryPinyin": "ao de li",
        "phoneCode": "43",
        "countryCode": "AT"
      },
      {
        "countryName": "澳大利亚",
        "countryPinyin": "ao da li ya",
        "phoneCode": "61",
        "countryCode": "AU"
      },
      {
        "countryName": "阿鲁巴",
        "countryPinyin": "a lu ba",
        "phoneCode": "297",
        "countryCode": "AW"
      },
      {
        "countryName": "阿塞拜疆",
        "countryPinyin": "a sai bai jiang",
        "phoneCode": "994",
        "countryCode": "AZ"
      },
      {
        "countryName": "阿尔及利亚",
        "countryPinyin": "a er ji li ya",
        "phoneCode": "213",
        "countryCode": "DZ"
      },
      {
        "countryName": "爱沙尼亚",
        "countryPinyin": "ai sha ni ya",
        "phoneCode": "372",
        "countryCode": "EE"
      },
      {
        "countryName": "埃及",
        "countryPinyin": "ai ji",
        "phoneCode": "20",
        "countryCode": "EG"
      },
      {
        "countryName": "埃塞俄比亚",
        "countryPinyin": "ai sai e bi ya",
        "phoneCode": "251",
        "countryCode": "ET"
      },
      {
        "countryName": "爱尔兰",
        "countryPinyin": "ai er lan",
        "phoneCode": "353",
        "countryCode": "IE"
      },
      {
        "countryName": "阿曼",
        "countryPinyin": "a man",
        "phoneCode": "968",
        "countryCode": "OM"
      }
    ],
    "key": "A"
  },
  {
    "items": [
      {
        "countryName": "波斯尼亚和黑塞哥维那",
        "countryPinyin": "bo si ni ya he hei sai ge wei na",
        "phoneCode": "387",
        "countryCode": "BA"
      },
      {
        "countryName": "巴巴多斯",
        "countryPinyin": "ba ba duo si",
        "phoneCode": "1",
        "countryCode": "BB"
      },
      {
        "countryName": "比利时",
        "countryPinyin": "bi li shi",
        "phoneCode": "32",
        "countryCode": "BE"
      },
      {
        "countryName": "布基纳法索",
        "countryPinyin": "bu ji na fa suo",
        "phoneCode": "226",
        "countryCode": "BF"
      },
      {
        "countryName": "保加利亚",
        "countryPinyin": "bao jia li ya",
        "phoneCode": "359",
        "countryCode": "BG"
      },
      {
        "countryName": "巴林",
        "countryPinyin": "ba lin",
        "phoneCode": "973",
        "countryCode": "BH"
      },
      {
        "countryName": "布隆迪",
        "countryPinyin": "bu long di",
        "phoneCode": "257",
        "countryCode": "BI"
      },
      {
        "countryName": "贝宁",
        "countryPinyin": "bei ning",
        "phoneCode": "229",
        "countryCode": "BJ"
      },
      {
        "countryName": "百慕大",
        "countryPinyin": "bai mu da",
        "phoneCode": "1",
        "countryCode": "BM"
      },
      {
        "countryName": "玻利维亚",
        "countryPinyin": "bo li wei ya",
        "phoneCode": "591",
        "countryCode": "BO"
      },
      {
        "countryName": "巴西",
        "countryPinyin": "ba xi",
        "phoneCode": "55",
        "countryCode": "BR"
      },
      {
        "countryName": "巴哈马",
        "countryPinyin": "ba ha ma",
        "phoneCode": "1",
        "countryCode": "BS"
      },
      {
        "countryName": "不丹",
        "countryPinyin": "bu dan",
        "phoneCode": "975",
        "countryCode": "BT"
      },
      {
        "countryName": "博茨瓦纳",
        "countryPinyin": "bo ci wa na",
        "phoneCode": "267",
        "countryCode": "BW"
      },
      {
        "countryName": "白俄罗斯",
        "countryPinyin": "bai e luo si",
        "phoneCode": "375",
        "countryCode": "BY"
      },
      {
        "countryName": "伯利兹",
        "countryPinyin": "bo li zi",
        "phoneCode": "501",
        "countryCode": "BZ"
      },
      {
        "countryName": "冰岛",
        "countryPinyin": "bing dao",
        "phoneCode": "354",
        "countryCode": "IS"
      },
      {
        "countryName": "北马里亚纳群岛",
        "countryPinyin": "bei ma li ya na qun dao",
        "phoneCode": "1",
        "countryCode": "MP"
      },
      {
        "countryName": "巴拿马",
        "countryPinyin": "ba na ma",
        "phoneCode": "507",
        "countryCode": "PA"
      },
      {
        "countryName": "巴布亚新几内亚",
        "countryPinyin": "ba bu ya xin ji nei ya",
        "phoneCode": "675",
        "countryCode": "PG"
      },
      {
        "countryName": "巴基斯坦",
        "countryPinyin": "ba ji si tan",
        "phoneCode": "92",
        "countryCode": "PK"
      },
      {
        "countryName": "波兰",
        "countryPinyin": "bo lan",
        "phoneCode": "48",
        "countryCode": "PL"
      },
      {
        "countryName": "波多黎各",
        "countryPinyin": "bo duo li ge",
        "phoneCode": "1",
        "countryCode": "PR"
      },
      {
        "countryName": "巴勒斯坦领土",
        "countryPinyin": "ba lei si tan ling tu",
        "phoneCode": "970",
        "countryCode": "PS"
      },
      {
        "countryName": "巴拉圭",
        "countryPinyin": "ba la gui",
        "phoneCode": "595",
        "countryCode": "PY"
      }
    ],
    "key": "B"
  }
]

Same as issue 188,but V2 has no 'numberOfSectionPoolSize' property.

[ATShiTou]

没明白你想表达什么。你的数据只有2组啊，只render2次就是正确的啊。188所说的问题是V1版本的，V2已经不会出现那个问题。你是想说调用scrollToIndexPath 会出现问题吗？可以描述详细一点吗？

[ATShiTou]

难道你是想说你数据不止2组，进入的时候LargeList只调用了2次？

这个库的目的本来就是这样的，LargeList只会渲染当前屏幕需要的Section和Row（当然还包含一些缓存，实际渲染是默认2个屏幕高度的内容），你向下滑动的时候，会自动将上面不需要的Section和Row挪到下面，并使用新的数据刷新。

[jamessawyer]

我这只列出了部分数据，数据是从A-Z的，所有国家的数据，这里只截取了部分。 实际中渲染了A和B的数据，并且对A B 2组数据重复渲染了多次，只有第一次A B的section header是有显示的，其余重复的部分 section header 是空白的

[ATShiTou]

我觉得你还是检查一下你的数据吧，我已经把你代码测了一下，数据复制了多份，每个Section修改了名字，并没有发现问题

[jamessawyer]

在iphone XR模拟器上是正常渲染的，模拟器版本 iOS 12.01

[ATShiTou]

可以在iPhone 6S模拟器上跑下，截图我看看吗，如果需要动画才能表达清楚的话，可以做个gif吗？毕竟，我连你出现的问题都不是很清楚

[jamessawyer]

iphone6s模拟器上是正常的，我做一个真机上的gif给您，麻烦稍等一下

[jamessawyer]

[jamessawyer]

不知道是否可以看清楚， 后面的数据都是A B 进行重复的数据。iphone6s模拟器 和其它模拟器上是OK的

[ATShiTou]

这。。。。

感觉和系统版本、react native、react-native-gesture-handler版本有关系了。。。 照理说模拟器没问题的话，真机也应该没问题的。 你试试把react-native-gesture-handler版本调到1.06，重新编译安装

我这里暂时重现不了你的场景，只能有空了看了

[ATShiTou]

有没有测试过其他真机设备？

[jamessawyer]

iphone 6s真机版本是10.3.3， 在iphoneX真机 版本是12.0 都有这个问题。 大神，有没有这种选国家电话区号的组件推荐一下？

[jamessawyer]

使用 react-native-gesture-handler V1.0.6 还是存在相同的问题 🤣

[ATShiTou]

看一下你的这些版本号，我这里环境，测试是没有问题的 "babel-jest", "babel-preset-react-native", "jest", "react-test-renderer" “react-native-spring-scrollview”

我看看完全用你的版本号有没有问题

[ATShiTou]

最主要，我这边完全不能重现，根本看不到你那边的问题，我这里真机和模拟器都没问题

[jamessawyer]

这是大致信息

"babel-jest": 未使用 "babel-preset-react-native", 未使用 "babel-preset-react-native-stage-0": 1.0.1， "babel-plugin-transform-decorators-legacy": 1.3.4, "jest": 22.4.3, "react-test-renderer"： 16.3.0-alpha.1 “react-native-spring-scrollview”: 0.0.24, "jest-react-native": 18.0.0

"react-native": 0.54.0 "react": 16.3.0-alpha.1 "react-native-largelist-v2": 2.1.1 "react-native-gesture-handler": 1.0.8 和 1.0.6两个版本均试过

[jamessawyer]

从这个 升级到16.3.1以上 我尝试先升级一下react 版本，不好意思， 刚看到这条

[ATShiTou]

我这边换0.54.0的react-native，没成功，应该是因为哪个依赖的库版本不对

我这里这样的版本是没出问题的 "react": "16.3.1", "react-native": "0.56.0", "react-native-gesture-handler": "1.0.6", 是没问题的

[jamessawyer]

我这边需要将react-native 也进行升级吗， 我直接将 react切换为 16.5，直接就报错了

[ATShiTou]

可以把你的调用demo上传到github上，我去测试吗 ？

[jamessawyer]

我直接在项目中跑的，项目中有很多依赖，我先把项目升级一下 测试之后告诉您结果

[jamessawyer]

经过2天折腾，终于把项目从0.54.0升级到了0.57.2，升级之后react-native-largelist-v2终于正常使用了，感觉列表比RN自带的list顺滑很多，谢谢大佬这么酷的开源项目😁。 还请教一个问题，如果将最后一组section header 也能够产生吸附效果，到 Z 之后就无法往上滑动了

[ATShiTou]

没明白你的问题

[jamessawyer]

Z能够吸到顶部

[ATShiTou]

这不就是正常的吗？

[jamessawyer]

是正常的，但是我按侧边栏的Z,因为Z的高度不对，导致定位到了前面的Y，这样体验不是很好

[ATShiTou]

拜托去看看其他类似的，比如iOS通讯录，微信通讯录，都是这样处理的好吗

[jamessawyer]

好像是的，非常感谢哈 谢谢您宝贵的时间和耐心的指导😁