React Native-在ScrollView中分页ListViews?

旺卡

ListView在单个ScrollView组件中有3组件,如下所示:

<ScrollView>
  <Header />
  <ListView onEndReached={() => alert('load more 1')}/>
  <ListView onEndReached={() => alert('load more 2')}/>
  <ListView onEndReached={() => alert('load more 3')}/>
  <Footer />
</ScrollView>

Header组件具有一些共同的内容,并且还具有3个标签,这些标签会触发分别显示ListView

问题是任何ListViewonEndReached={() => alert('load more 1')}从未运行警报,所以我向下滚动,撞上列表视图结束时,我不能加载更多。拆下包装纸ScrollView,然后运行警报,但是Header由于我们只是拆下了包装纸,因此普通滚动条不会滚动ScrollView标头需要使用listview进行滚动,这就是为什么我将需要滚动的所有内容都包装在中的原因ScrollView

重要提示:我真的不能用ListViewrenderHeader={this.header},对于这种情况。因为,即使Header将滚动,它会重新描绘的共同Header和3个标签为每ListView一个每一次ListView的,而不是一次呈现。因此Header,每次重新渲染都ListView不会减少应用程序的渲染

寻找此问题的解决方案,其中Header使用listviews滚动并onEndReached为visible触发ListView

坦率

我认为您将不得不通过更改每个listView中的dataSource来响应选择了哪个标头元素来解决此问题,而不是加载三个不同的ListViews。

getInitialState() {
    return {
        currentList: this.ds.cloneWithRowsAndSections(INITIAL_DATA);
    }
},
render() {
    return <ListView renderHeader={this._renderHeader} dataSource={this.state.currentList}/>
}

不想这样做的唯一原因是,如果您想在三个子ListViews中保持滚动位置,但是那样就没有用了,因为您总是必须滚动到顶部才能更改要查找的ListView。无论如何。

然后在_renderHeader函数中,将呈现一个选择器,该选择器currentList根据所选的标头填充不同的数据。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React Native、ScrollView 分页事件

来自分类Dev

React Native ScrollView没有以完全对齐的方式分页

来自分类Dev

onPull React Native ScrollView

来自分类Dev

在React Native Redux中分派导入的函数

来自分类常见问题

React Native:使用ScrollView时垂直居中

来自分类Dev

React Native:ScrollView内部的TouchableOpacity onPress问题

来自分类Dev

使用ScrollView的InfiniteScroll-React Native

来自分类Dev

React Native ScrollView Horizontal无法正常工作

来自分类Dev

ScrollView无法在React Native中滚动

来自分类Dev

React-Native | 测量ScrollView的内部宽度

来自分类Dev

React-native Scrollview 不起作用

来自分类Dev

React Native Scrollview 与 flexGrow 不滚动

来自分类Dev

无法在React Native中分配为#<Object>的只读属性'props'

来自分类Dev

React Native:在ScrollView中更改焦点时键盘关闭

来自分类Dev

如何使用React Native iOS将ListView放入ScrollView中?

来自分类Dev

React Native-如何测量ScrollView中内容的大小?

来自分类常见问题

获取React Native中ScrollView的当前滚动位置

来自分类Dev

在react-native listview / scrollview中找出滚动方向

来自分类Dev

React Native Android:如何删除ScrollView的“过度滚动效果”

来自分类Dev

HighLight / ScrollTo-ListView,React-Native上的ScrollView

来自分类Dev

如何从React Native中的ScrollView组件获取onPress事件

来自分类Dev

React Native: Setting flex:1 on a ScrollView contentContainerStyle causes overlapping of components

来自分类Dev

如何使React Native的ScrollView初始缩放不为1?

来自分类Dev

如何获取Scrollview项目React-native的索引?

来自分类Dev

ScrollView在React Native中不以小视图高度滚动

来自分类Dev

flex在react-native中的ScrollView中不起作用

来自分类Dev

打开键盘时,React Native ScrollView不滚动

来自分类Dev

React Native,iOS-ScrollView在设备上不起作用

来自分类Dev

ScrollView 中的 React Native v0.42 flexbox 错误

Related 相关文章

  1. 1

    React Native、ScrollView 分页事件

  2. 2

    React Native ScrollView没有以完全对齐的方式分页

  3. 3

    onPull React Native ScrollView

  4. 4

    在React Native Redux中分派导入的函数

  5. 5

    React Native:使用ScrollView时垂直居中

  6. 6

    React Native:ScrollView内部的TouchableOpacity onPress问题

  7. 7

    使用ScrollView的InfiniteScroll-React Native

  8. 8

    React Native ScrollView Horizontal无法正常工作

  9. 9

    ScrollView无法在React Native中滚动

  10. 10

    React-Native | 测量ScrollView的内部宽度

  11. 11

    React-native Scrollview 不起作用

  12. 12

    React Native Scrollview 与 flexGrow 不滚动

  13. 13

    无法在React Native中分配为#<Object>的只读属性'props'

  14. 14

    React Native:在ScrollView中更改焦点时键盘关闭

  15. 15

    如何使用React Native iOS将ListView放入ScrollView中?

  16. 16

    React Native-如何测量ScrollView中内容的大小?

  17. 17

    获取React Native中ScrollView的当前滚动位置

  18. 18

    在react-native listview / scrollview中找出滚动方向

  19. 19

    React Native Android:如何删除ScrollView的“过度滚动效果”

  20. 20

    HighLight / ScrollTo-ListView,React-Native上的ScrollView

  21. 21

    如何从React Native中的ScrollView组件获取onPress事件

  22. 22

    React Native: Setting flex:1 on a ScrollView contentContainerStyle causes overlapping of components

  23. 23

    如何使React Native的ScrollView初始缩放不为1?

  24. 24

    如何获取Scrollview项目React-native的索引?

  25. 25

    ScrollView在React Native中不以小视图高度滚动

  26. 26

    flex在react-native中的ScrollView中不起作用

  27. 27

    打开键盘时,React Native ScrollView不滚动

  28. 28

    React Native,iOS-ScrollView在设备上不起作用

  29. 29

    ScrollView 中的 React Native v0.42 flexbox 错误

热门标签

归档