如何创建类似 Twitter 的个人资料布局？

Question

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

• 标题（配置文件）
• ViewPagerNav（自定义）
• 查看页面
  • 带有 ListView 的选项卡
  • 带有 ListView 的选项卡

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

我的渲染视图应该如何让页面滚动完整？

Answer 1

F8 app 中有一个很好的例子。您要查看的 3 个文件在这里：

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”选项卡。

基本思想是ListContainer 通过handleScroll 函数跟踪滚动位置。它将handleScroll 传递给它的所有children，将函数重命名为onScroll。

PureListView 通过对象扩展运算符{...this.props} 获取onScroll 属性并将其传递给ListView。

这只是为了跟踪滚动。如果您查看MyScheduleView.js，您可以看到它的主要实现方式。

希望对您有所帮助。