Merge pull request #69 from bolan9999/develop

Fix section error when reloadData
bolan9999 · Jan 22, 2018 · 75fdab3 · 75fdab3
2 parents f62158b + 66ba589
commit 75fdab3
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 36 deletions.
diff --git a/README-cn.md b/README-cn.md
@@ -344,6 +344,9 @@ onScroll | ({nativeEvent:{contentOffset:{x:number,y:number}}})=> any |  | 滑动
 
 ## 更新日志
 
+### 版本 1.2.5
+* 修复reloadData有时Section样式不正确的问题
+
 ### 版本 1.2.4
 * 修复初始化时是空视图，numberOfCellPoolSize默认值过小的问题
 

diff --git a/README.md b/README.md
@@ -336,6 +336,9 @@ Get LargeList's footer height
 
 ## Update Log
 
+### Version 1.2.5
+* Fix section error when reloadData
+
 ### Version 1.2.4
 * Fix default numberOfCellPoolSize error when empty.
 

diff --git a/ios/LargeListDemo/AppDelegate.m b/ios/LargeListDemo/AppDelegate.m
@@ -18,8 +18,8 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
 {
   NSURL *jsCodeLocation;
 #ifdef DEBUG
-//    jsCodeLocation = [NSURL URLWithString:@"http://10.16.64.93:8081/index.bundle?platform=ios&dev=true"];
-  jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.103:8081/index.bundle?platform=ios&dev=true"];
+    jsCodeLocation = [NSURL URLWithString:@"http://10.16.64.93:8081/index.bundle?platform=ios&dev=true"];
+//  jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.103:8081/index.bundle?platform=ios&dev=true"];
 //  jsCodeLocation = [NSURL URLWithString:@"http://172.20.10.4:8081/index.bundle?platform=ios&dev=true"];
 #else
   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

diff --git a/react-native-largelist/largelist/LargeList.js b/react-native-largelist/largelist/LargeList.js
@@ -259,8 +259,11 @@ class LargeList extends React.Component {
     this.contentSize.height += this.headerHeight;
     this.contentSize.height += this.footerHeight;
     this.safeArea.top = this.safeArea.bottom = this.headerHeight;
-    this._onScroll({ nativeEvent: { contentOffset: this.contentOffset } });
     this.forceUpdate();
+    this._onScroll(
+      { nativeEvent: { contentOffset: this.contentOffset } },
+      true
+    );
   }
 
   componentDidUpdate() {
@@ -388,21 +391,24 @@ class LargeList extends React.Component {
             renderSection={this.props.renderSection}
             ref={reference => (this.currentSectionRef = reference)}
             numberOfSections={this.numberOfSections}
+            heightForSection={this.props.heightForSection}
           />
         </ScrollView>
       </View>
     );
   }
 
   _createSection(section: number, top: number, refs: LargeListSection[]) {
+    let height = section>=0 && section< this.numberOfSections() ? this.props.heightForSection(section):0;
     return (
       <LargeListSection
         ref={reference => reference && refs.push(reference)}
         key={this.keyForCreating++}
-        style={[styles.absoluteStretch, { top: top }]}
+        style={[styles.absoluteStretch, { top: top, height:height }]}
         numberOfSections={this.numberOfSections}
         section={section}
         renderSection={this.props.renderSection}
+        heightForSection={this.props.heightForSection}
       />
     );
   }
@@ -436,13 +442,13 @@ class LargeList extends React.Component {
   _onCellTouchBegin(sender) {
     let hide = false;
     this.workRefs.forEach(item => {
-      let res  = item.hideOther(sender);
+      let res = item.hideOther(sender);
       if (!hide) hide = res;
     });
     return hide;
   }
 
-  _onScroll(e, withoutReload) {
+  _onScroll(e, forceUpdate) {
     let offset: Offset = e.nativeEvent.contentOffset;
     if (this.empty || !this.sizeConfirmed) {
       this.contentOffset = offset;
@@ -462,6 +468,7 @@ class LargeList extends React.Component {
     this.lastScrollTime = now;
     let reloadType: number = 0;
     if (
+      forceUpdate ||
       offset.y < topMargin ||
       offset.y + this.size.height + bottomMargin > this.contentSize.height ||
       speed < this.props.speedLevel1
@@ -712,16 +719,14 @@ class LargeList extends React.Component {
       if (section.top !== -10000)
         section.updateToSection(section.section, -10000, section.height, false);
     });
-
-    if (!withoutReload)
-      switch (reloadType) {
-        case 0:
-          this._forceUpdate();
-          break;
-        default:
-          this._positionUpdate();
-          break;
-      }
+    switch (reloadType) {
+      case 0:
+        this._forceUpdate();
+        break;
+      default:
+        this._positionUpdate();
+        break;
+    }
     this.contentOffset = offset;
     this.props.onScroll && this.props.onScroll(e);
     //解决冲量结束无法回调的问题
@@ -888,7 +893,6 @@ class LargeList extends React.Component {
     ) {
       this.sizeConfirmed = true;
       this.initCells();
-      // setTimeout( ()=>this._forceUpdate(),2000);
     }
   }
 
@@ -948,8 +952,7 @@ class LargeList extends React.Component {
     if (offset.y > this.contentSize.height - this.size.height)
       offset.y = this.contentSize.height - this.size.height;
     if (!animated) {
-      this._onScroll({ nativeEvent: { contentOffset: offset } });
-      this._forceUpdate();
+      this._onScroll({ nativeEvent: { contentOffset: offset } }, true);
     }
     this.scrollViewRef.scrollTo(offset);
   }
@@ -1019,7 +1022,6 @@ class LargeList extends React.Component {
       this.initVar();
       this.safeArea = { top: 0, bottom: 0 };
       this.workRefs.forEach(cell => {
-        // this.freeRefs.splice(0, 0, cell);
         this.freeRefs.push(cell);
       });
       this.freeRefs.forEach(cell => {

diff --git a/react-native-largelist/largelist/LargeListCell.js b/react-native-largelist/largelist/LargeListCell.js
@@ -107,6 +107,7 @@ class LargeListCell extends React.Component {
   componentDidUpdate() {
     if (this._shouldScrollToCenter && this.contentSize.width) {
       this._enableShowEx = false;
+      this._shouldScrollToCenter = false;
       let timer = setTimeout(() => {
         if (this._showLeft) {
           this._scrollToShowLeft(false);
@@ -126,9 +127,7 @@ class LargeListCell extends React.Component {
 
   render() {
     let { section, row } = this.indexPath;
-    let show =
-      // this.top !== -10000 &&
-      section >= 0 &&
+    let show = section >= 0 &&
       section < this.props.numberOfSections() &&
       row >= 0 &&
       row < this.props.numberOfRowsInSection(section);
@@ -234,8 +233,10 @@ class LargeListCell extends React.Component {
   _onLayout(e) {
     if (this.contentSize.width !== e.nativeEvent.layout.width) {
       this.contentSize = { ...e.nativeEvent.layout };
-      this._shouldScrollToCenter = true;
-      this.forceUpdate();
+      if (this._lWidth()>0) {
+        this._shouldScrollToCenter = true;
+        this.forceUpdate();
+      }
     }
   }
 

diff --git a/react-native-largelist/largelist/LargeListSection.js b/react-native-largelist/largelist/LargeListSection.js
@@ -20,7 +20,8 @@ class LargeListSection extends React.Component {
   static propTypes = {
     numberOfSections: PropTypes.func,
     renderSection: PropTypes.func,
-    section: PropTypes.number
+    section: PropTypes.number,
+    heightForSection: PropTypes.func,
   };
 
   rootView: View;
@@ -36,7 +37,6 @@ class LargeListSection extends React.Component {
         style: { top: this.top, height: this.height }
       });
     this.waitForRender = false;
-
     this.forceUpdate();
   }
 
@@ -71,8 +71,8 @@ class LargeListSection extends React.Component {
   }
 
   render() {
-    // let show = this.section>=0 && this.top !== -10000;
-    let show = this.section>=0 && this.section<this.props.numberOfSections() && this.top !== -10000;
+    let show = this.section>=0 && this.section<this.props.numberOfSections();// && this.top !== -10000;
+    if (show && !this.height) this.height = this.props.heightForSection(this.section);
     return (
       <View
         ref={ref => (this.rootView = ref)}

diff --git a/react-native-largelist/package.json b/react-native-largelist/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "react-native-largelist",
-	"version": "1.2.3",
+	"version": "1.2.5",
 	"private": false,
 	"description": "The best performance large list component which is much better than SectionList for React Native.",
 	"author": "bolan9999 <[email protected]>",

diff --git a/samples/LargeListSample4.js b/samples/LargeListSample4.js
@@ -70,7 +70,11 @@ class LargeListSample4 extends React.Component {
           alignItems: "center"
         }}
         onPress={() => {
-          this.listRef.scrollToIndexPath({ section: row, row: 0 });
+          // this.listRef.scrollToIndexPath({ section: row, row: 0 });
+          foods[row].selected = true;
+          foods[this.selectedIndex].selected = false;
+          this.selectedIndex = row;
+          this.indexes.reloadData();
         }}
       >
         <Text style={{ fontSize: 18 }} fontWeight={300}>
@@ -166,13 +170,13 @@ class LargeListSample4 extends React.Component {
     foods[this.selectedIndex].selected = false;
     foods[section].selected = true;
     // 使用局部更新
-    this.indexes.reloadIndexPaths([
-      { section: 0, row: this.selectedIndex },
-      { section: 0, row: section }
-    ]);
+    // this.indexes.reloadIndexPaths([
+    //   { section: 0, row: this.selectedIndex },
+    //   { section: 0, row: section }
+    // ]);
     this.selectedIndex = section;
     // 使用更新所有数据源
-    // this.indexes.reloadData();
+    this.indexes.reloadData();
 
     let bFind = false;
     this.indexes.visibleIndexPaths().forEach(indexPath=>{