如何创建像个人资料布局这样的Twitter? [英] How to create Twitter like profile layout?

问题描述

我正在尝试在React Native中创建类似个人资料布局的Twitter.尽管许多应用程序都使用这种模式.我当前的JSX设置是这样的.

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.

• 标题(个人资料)
• ViewPagerNav(自定义)
• ViewPager
  • 带ListView的标签
  • 带ListView的标签

  问题是仅底部滚动.我已经在许多React Native应用程序中看到了这个问题.有解决方案吗?

  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?

  推荐答案

  F8应用程序中实际上有一个很好的例子.您要查看的3个文件在这里:

  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

  如果要查看其在应用程序中的工作方式，请单击我的F8"标签.

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

  基本思想是 ListContainer 通过 children 将函数重命名为 onScroll .

  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.

  PureListView ，它通过对象传播运算符

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

  仅用于跟踪滚动.如果您查看 MyScheduleView.js ，您将看到它的主要实现方式.

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

  希望有帮助.

  这篇关于如何创建像个人资料布局这样的Twitter?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！