V2 version renderSection is called only two times #195

jamessawyer · 2018-10-28T06:31:12Z

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.

The text was updated successfully, but these errors were encountered:

ATShiTou · 2018-10-28T07:08:39Z

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

ATShiTou · 2018-10-28T07:17:00Z

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

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

jamessawyer · 2018-10-28T07:19:32Z

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

ATShiTou · 2018-10-28T07:23:03Z

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

jamessawyer · 2018-10-28T07:24:10Z

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

ATShiTou · 2018-10-28T07:27:38Z

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

jamessawyer · 2018-10-28T07:30:56Z

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

jamessawyer · 2018-10-28T07:39:54Z

jamessawyer · 2018-10-28T07:42:01Z

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

ATShiTou · 2018-10-28T07:47:53Z

这。。。。

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

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

ATShiTou · 2018-10-28T07:48:46Z

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

jamessawyer · 2018-10-28T07:52:28Z

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

jamessawyer · 2018-10-28T08:10:03Z

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

ATShiTou · 2018-10-28T08:18:28Z

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

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

ATShiTou · 2018-10-28T08:20:08Z

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

jamessawyer · 2018-10-28T08:49:08Z

这是大致信息

"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 · 2018-10-28T08:52:52Z

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

ATShiTou · 2018-10-28T09:09:57Z

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

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

jamessawyer · 2018-10-28T09:11:58Z

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

ATShiTou · 2018-10-28T09:14:13Z

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

jamessawyer · 2018-10-28T09:23:23Z

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

jamessawyer · 2018-10-30T04:02:20Z

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

ATShiTou · 2018-10-30T04:14:57Z

没明白你的问题

jamessawyer · 2018-10-30T04:21:59Z

Z能够吸到顶部

ATShiTou · 2018-10-30T04:22:41Z

这不就是正常的吗？

jamessawyer · 2018-10-30T04:23:44Z

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

ATShiTou · 2018-10-30T04:27:37Z

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

jamessawyer · 2018-10-30T04:31:13Z

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

jamessawyer closed this as completed Oct 30, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

V2 version renderSection is called only two times #195

V2 version renderSection is called only two times #195

jamessawyer commented Oct 28, 2018 •

edited

ATShiTou commented Oct 28, 2018

ATShiTou commented Oct 28, 2018 •

edited

jamessawyer commented Oct 28, 2018

ATShiTou commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

ATShiTou commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

ATShiTou commented Oct 28, 2018

ATShiTou commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

ATShiTou commented Oct 28, 2018

ATShiTou commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

ATShiTou commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

ATShiTou commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

jamessawyer commented Oct 30, 2018

ATShiTou commented Oct 30, 2018

jamessawyer commented Oct 30, 2018

ATShiTou commented Oct 30, 2018

jamessawyer commented Oct 30, 2018

ATShiTou commented Oct 30, 2018

jamessawyer commented Oct 30, 2018

V2 version renderSection is called only two times #195

V2 version renderSection is called only two times #195

Comments

jamessawyer commented Oct 28, 2018 • edited

ATShiTou commented Oct 28, 2018

ATShiTou commented Oct 28, 2018 • edited

jamessawyer commented Oct 28, 2018

ATShiTou commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

ATShiTou commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

ATShiTou commented Oct 28, 2018

ATShiTou commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

ATShiTou commented Oct 28, 2018

ATShiTou commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

ATShiTou commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

ATShiTou commented Oct 28, 2018

jamessawyer commented Oct 28, 2018

jamessawyer commented Oct 30, 2018

ATShiTou commented Oct 30, 2018

jamessawyer commented Oct 30, 2018

ATShiTou commented Oct 30, 2018

jamessawyer commented Oct 30, 2018

ATShiTou commented Oct 30, 2018

jamessawyer commented Oct 30, 2018

jamessawyer commented Oct 28, 2018 •

edited

ATShiTou commented Oct 28, 2018 •

edited