使用ReactHooks进行FlatList分页

文章/答案/技术大牛

发布

1回答

reactjs、react-native、react-redux、react-hooks

我有一个简单的列表，需要在滚动到底部时分页。目前，初始数据数组的工作没有任何问题。但当我想要将下一个数组追加到现有数组之后时，问题就来了。numberList被新的数组所取代。但不确定如何附加到它。> </Text> }; <SafeAreaView> <FlatList

浏览 43提问于2020-06-11得票数 1

回答已采纳

1回答

FlatList隐藏在大的内容之后

react-native、react-native-flatlist

使用ResiveNative0.64，我想显示一个图像，后面跟着评论，就像instagram一样。以下是我所做的简化工作(图像的样式和注释都管理得很好，我不把代码放在不污染问题的地方)： Image, View <View> <FlatList data={comments.filter(item =>

浏览 3提问于2021-05-21得票数 1

回答已采纳

2回答

以完全对齐的方式响应本机ScrollView而不是分页

react-native

我希望能够水平滚动，并让每一张卡显示在屏幕的中间，但分页并不是完全对齐。例如，当我滚动到下一张卡时，我会看到下一张卡的一部分。} ])} <FlatList

浏览 7提问于2019-11-30得票数 0

回答已采纳

2回答

在FaltList React本机中仅显示10条记录

javascript、react-native、axios、expo、react-native-flatlist

我在我的expo应用程序中从API中获取数据到FlatList中，但问题是有比500+记录更多的记录，但我想在FlatList中只显示10条记录，所以有什么方法可以做到吗？return ( <FlatList

浏览 20提问于2019-11-12得票数 0

回答已采纳

1回答

react native如何使用平面列表分页自动滑动

react-native、expo

我使用扁平列表和pagingEnable。如果任何人点击红色，那么显示列表应该移动到红色的图片。使用flatlist & pagingEnable可以做到这一点吗？

浏览 0提问于2021-07-31得票数 0

2回答

使用分页的FlatList，如何让可见页面上的事件发生改变？

react-native、react-native-flatlist

我正在构建一个简单的启用分页的水平React Native FlatList： <FlatList pagingEnabled={true} data我正在寻找的行为是，当用户向左和向右滑动列表时，列表将对项目进行分页，我希望回调使用可见项目触发一次。

浏览 15提问于2019-03-29得票数 4

1回答

水平分页:如何找到当前处于活动状态的哪个页面？

reactjs、react-native

下面是我的代码，用于在React本机中生成分页滚动视图： horizontal我认为在x或y中使用简单的数学值是没有用的，因为我不知道如何获得它们。

浏览 2提问于2018-09-29得票数 3

回答已采纳

2回答

我在Reactinative中有一个FlatList，它基本上是一个滚动列表，它可以在到达列表末尾时触发函数调用，就像延迟加载组件一样。为了让列表获得下一个数据，我使用分页，并将当前页面状态存储在useState中。问题是，当这个列表更新得非常快时，它就会使用陈旧的分页状态。我不知道该怎么办。如何与FlastList进行协调，或者如何使用适当的状态和函数组合来避免陈旧状态？({ skip: 0, const getData = as

浏览 4提问于2022-02-05得票数 1

回答已采纳

1回答

如何使用shouldComponentUpdate？

reactjs、react-native

因此，如果你有一个水平平面列表： array = [A, B, C, D, E] A | B |我的理解是，PureComponent通过对数组进行浅层比较来克服这一点，看看是否有任何变化，只有在有变化的情况下，比如E变为F，然后只更新特定的页面。例如： array = [ [1,2,3], [4,5,6], [7,8,9] ] 在上面的例子中，如果我将array2改为10而不是9，PureComponent将忽略这一点，因为它只进行浅层

浏览 23提问于2020-01-20得票数 0

2回答

如何在滚动时检测用户手指移位[平面列表]

reactjs、react-native

如何在滚动后检测用户手指移位？我已经添加了pan响应器，在释放时处理程序不会触发。

浏览 1提问于2017-09-14得票数 1

2回答

为了获得更好的性能，是否有一些组件可以在React本机中替换Flatlist

react-native、performance、mobile、cross-platform、react-native-flatlist

我的问题是，我正在使用Flatlist组件来呈现非纯组件的项。它们有许多状态、钩子和许多处理逻辑的函数。此外，我的列表中还有很多项，至少有28项，因为我想在一个月内提供一些信息。

浏览 17提问于2022-08-02得票数 0

1回答

如何在RN中制作平台表，逐步加载数据？

javascript、node.js、react-native、flatlist

我使用自定义钩子来获取数据HttpHook： export const useHttpClient = (

浏览 5提问于2022-08-17得票数 2

1回答

如何在从api中添加react本机分页

javascript、react-native

这是我的API，我想在我的react本机代码中调用这个API，这应该在分页中。

浏览 5提问于2022-06-17得票数 -1

4回答

React本机FlatList分页不起作用- onEndReached未触发

react-native、react-native-flatlist

我正在使用react-native FlatList组件对项目列表进行分页，因为根据文档，当到达页面末尾时，onEndReached必须被触发，目前我尝试更改onEndReachedThreshold注意:我使用的是ReactNative 0.48.4，所以这里是我的代码 <Container style={{ marginTop: 22 }}> stylecontentContainerStyle={{ flexGrow: 1 }}

浏览 65提问于2018-02-12得票数 8

回答已采纳

1回答

无限FlatList中的多个旋转木马分页同步问题

react-native、jsx、react-native-snap-carousel

反应性本地博览移动应用程序:我正在使用从我的数据库中弹出图像。请让我知道如何映射旋转木马引用和分页索引，这样我的FlatList中的多个旋转木马就可以正常工作了。我正在使用的代码，供参考：const [index, setInd

浏览 13提问于2021-08-25得票数 0

回答已采纳

2回答

即使将呈现在FlatList中的组件声明为PureComponent并且其属性引用未更改，也会重新呈现这些组件

reactjs、react-native、redux、react-redux、immutability

我正在开发一个带有redux的react原生应用程序，在该应用程序中，我以页面的形式获取帖子，每个页面包含5个帖子，并将它们呈现在FlatList中。问题是，在获取下一个帖子页面并将它们与现有的帖子数组连接时，我注意到以前页面中已经呈现在FlatList中的现有帖子被重新呈现。下面是我如何在主屏幕中呈现帖子FlatList： const { posts, onFetchPosts, postsComments} = this.props; retur

浏览 19提问于2019-07-10得票数 1

1回答

在react原生平面列表中使用Apollo钩子进行分页的最佳实现是什么？

react-native、apollo、apollo-client

我正在寻找关于如何在使用apollo钩子时最好地在flatlist提供的onEndReached回调中实现loadMore函数的见解！我已经让它在某种程度上工作了，除了每次我加载更多的结果时，列表会跳到顶部，因为扁平列表的数据字段依赖于来自useQuery的传入数据，而每次它要求更多结果时，这些数据都会改变……我不知道我是否应该实现基于偏移和限制的分页，基于指针的分页，还是其他策略。

浏览 10提问于2021-05-19得票数 0

2回答

如何启用对本机反应的滑动操作？

react-native

我正在通过一个对象列表进行映射，我希望用户每次滑动时都可以在数组中查看下一个对象(就像单击鼠标)。它适用于onClick，但我需要它的刷卡。

浏览 9提问于2022-10-25得票数 0

1回答

在React本机中使用Flatlist进行分页(下/前)

react-native、pagination、toggle、use-state、flatlist

最近，我开始学习Reactive原住民，并为我的项目进行了分页。我正在尝试创建一个Flatlist，它将只显示数据中的前十项。

浏览 2提问于2021-11-30得票数 2

回答已采纳

4回答

在“Flatlist”中添加数据，而不刷新react本机中的完整“Flatlist”

react-native、react-native-flatlist

FlatList附带了从API获取下一组数据的选项，当listview到达末尾时，我们也可以使用scrollTo函数保留Flatlist的最后滚动位置，但是实现这种方法是在下一个分页数据请求完整的listview加载时创建FlatList的重新加载，我们滚动到最后一个左转位置。无论如何，如果我们能够实现一个特性，即Flatlist中的现有数据不会刷新，并且只有新的数据附加到底部，而不改变react本机中的滚动位置，将有助于以更优化的方式呈现FlastList。

浏览 15提问于2022-05-08得票数 7

回答已采纳

点击加载更多