Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

I am trying to create Twitter like profile layout in React Native. Although many apps use this pattern. My current JSX setup is something like this.

  • Header (profile)
  • ViewPagerNav (custom)
  • ViewPager
    • Tab with ListView
    • Tab with ListView

Problem is that only bottom part scrolls. I have seen this problem for many React Native apps. Is there a solution for this?

How should my render view look like to g full get page scrolling?

enter image description here

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
328 views
Welcome To Ask or Share your Answers For Others

1 Answer

There is actually a really good example of this in the F8 app. The 3 files you want to look at are here:

https://github.com/fbsamples/f8app/blob/master/js/tabs/schedule/MyScheduleView.js https://github.com/fbsamples/f8app/blob/master/js/common/ListContainer.js https://github.com/fbsamples/f8app/blob/master/js/common/PureListView.js

If you want to see how it works in the app it is the My F8 tab.

The basic idea is that the ListContainer keeps track of the scroll position via the handleScroll function. It passes handleScroll to all of its children renaming the function to onScroll.

The PureListView a it takes that onScroll property via the object spread operator {...this.props} and passes it into the ListView.

That is all just to keep track of the scroll. If you look in MyScheduleView.js you can see how it is mostly implemented.

Hope that helps.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share

548k questions

547k answers

4 comments

86.3k users

...