How does RN realize that when View and FlatList exist at the same time, you can slide both List and the entire page?

clipboard.png

The

layout is as follows:
the above View displays personal information. The middle Tab component, the Tab component passes in a FlatList
(the key point is that there is a Tab component )

.

but this only scrolls FlatList , which means that the top half of the page does not scroll. Try wrapping the outermost layer with ScrollView , no, because FlatList is not high enough to support ScrollView .

wants to do this: make them look like a page scrolling.
here"s how I solve it: listen to the onScoll of FlatList , and then use the Animated animation to dynamically set the top style value of the top half of View . But it doesn"t look smooth.

this page source code -sharp-sharp-sharp problem description

React-native react.js
Jun.09,2022

it is feasible to put flatlist in scrollview by personal test:

Code: 

const datas = [];
for (let i = 0; i < 100; iPP) {
  datas.push(i);
}

...

<ScrollView>
  <View style={{ height: 300, backgroundColor: '-sharpf00' }}></View>
  <FlatList
    renderItem={({ item }) => {
      return (
        <Text style={{ height: 50, lineHeight: 50, textAlign: 'center', backgroundColor: '-sharpeee', marginTop: 8 }}>
          {item}
        </Text>
      )
    }}
    data={datas}
  />
</ScrollView>

P.S. my pot, the description of this problem is not very accurate, but the problem lies with the Tab component. I use react-native-scrollable-tab-view . If I add this component, I won't be able to scroll the whole page as mentioned above. If only ScrollView and FlatList are nested, the whole page can be scrolled.

P.P.S. rn-collapsing-tab-bar this component can solve the above problems (the idea is also using Aniamted)

Update

2019.3.8: although the rn-collapsing-tab-bar component solves the scrolling problem, it introduces another problem: when the Tab page switches, it will re-render the component (it is expected not to re-render the component, and the component still maintains its previous state, especially after scrolling down). Therefore, I have customized the DefaultTabBar component of react-native-scrollable-tab-view according to the description of the problem. There will be no problem.

The

code is in here

Nesting FlatList in

ScrollView causes scrolling events in FlatList not to be triggered. OnEndReached is triggered crazily at the beginning, and onEndReached is not triggered when you slide to the bottom. How did you solve this

Previous: Vuejs h5 frontend sharing failure problem

Next: Please tell me how to make 2 animation for one picture. I'm going to make the picture suddenly enlarge, and then delay3 seconds to move around.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-42b865d-68c9.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-42b865d-68c9.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?