A similar design was recently used to reconstruct a more complex native page using RN, as shown below

Compare that to what Google can get

First of all, let’s analyze github and the blog solutions that Google has obtained from various internal and external networks. Most of them are inconsistent with my requirements. Some of them are implemented with NativeComponent, which deviates from the original intention of cross-platform. The closest we’ve seen so far is this blog post from medium.com/@andi.gu.ca…

Look at the source can know is using ScrollView nested TableView scheme, Demo effect is indeed perfect, but this scheme has two fatal problems,

  • One is the slide offset. In this scheme, the FlatList offset of all child tabs changes with the parent ScrollView. When you slide to item 10 in Tab1 and then go to Tab2, the loaded tab2 still stays at item 10’s coordinates. If tab1 and TAB2 have different data lengths, but the overall height of ScrollView in this scheme is the same, the TAB with less data can continue to slide after sliding to the bottom of the product, which is absolutely unacceptable
  • One is memory leakage. In my actual project, the single Item of FlatList is still complicated, including pictures, animations, etc. Because FlatList is wrapped by ScrollView, its memory reclamation mechanism will become weak. When MY Android project slides to 70~80 items, The whole list will suddenly become unusually slow, which should be a bug of RN, not caused by pure performance, and the memory consumption is high. Several Android flagship phones, medium and low-end phones, have this problem, but iOS does not have this sudden slow problem, and the memory problem also exists

It has been about a week since I got to this stage. I thought the perfect scheme still had so many fatal problems, but I basically came to the conclusion that the scheme of nesting FlatList with ScrollView could not be used, and then switch back to single-layer FlatList. The top Header follows the FlatList offset to animate the scheme

Break down the implementation plan of this project at the present stage

The next problem to solve is to keep multiple FlatList offsets in sync under scrollableTableView. This problem is simple by using an array to store the Ref attribute of each FlatList. Then at the end of the FlatList swipe gesture in the current screen, set the offsets of the other FlatLists to keep in sync, but one drawback of this is that it is not possible to record the offsets of each page (it should be possible, but it is not in the demo), and then fix that when each FlatList is initialized, Setting the offset of the header element will have to wait until the FlatLis component DidMount, otherwise it will not take effect.

Post the source code of the final implementation: github.com/zjkhiyori/r…