问题标签 [react-flatlist]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
react-native - 使用 Jest 进行 React-Native FlatList RenderItem 测试
我开发UserContainer
了使用 FlatList 的组件我能够使用 Jest 测试 FlatList 测试。
Note
我没有使用酶库进行测试
但是不知道怎么测试renderItem={renderItem}
任何人,请帮助
reactjs - Load React Native Recyclerlistview 上的闪烁问题
我已经从 Flatlist 切换到 Flipkart 的 RecyclerlistView。但是像 onload 和 onscroll 这样的事件存在一些行渲染闪烁问题,这似乎很奇怪。有人对此有任何解决办法吗?
这是代码:
react-native - 在 React Native 中使用 Flatlist 数据导航
你好这里我有一些作为平面列表形式的数据,我已经提取了它,现在我想在我点击的那个屏幕上移动,如果我点击屏幕 A,那么我将移动到屏幕 A,如果我点击屏幕B然后我将移动到屏幕B上,如果我点击屏幕C,那么我将移动到屏幕C,如果我点击屏幕D,那么我将移动到屏幕D,并显示他们的标题如何根据他们调用正确的屏幕标题和屏幕.. 如何导航它.. 示例图像在这里 代码..
请提出任何解决方案..谢谢..
reactjs - React Native flatlist,无法从一开始就加载视图
flatlist 是从互联网上的 JSON 文件中获取的,但是当我在手机上加载应用程序时,列表会将我带到 JSON 文件的第一个元素(列表的底部),但我想查看最后一个加载应用程序时 JSON 文件的元素(列表顶部)。
reactjs - FlatList 渲染对于大数据集来说很重
在我的应用程序中,我有一个FlatList
包含 100 个项目的数据集。每个项目都有一个复杂的用户界面,我注意到它对性能造成了严重影响。包含列表的页面最多需要 5 秒才能加载。我注意到,在第一次渲染组件的那一刻,我的数据集中的每个项目也会调用该renderItem
函数,我还注意到,如果该页面上的其他内容有任何其他 setState 更改,也会发生这种情况FlatList
. 有没有办法防止重新渲染平面列表或至少重新渲染可见项目 - 就像在原生 Android 中使用 Recycle 一样?如何仅在组件首次出现时渲染可见项目?我尝试使用initialNumToRender
,maxToRenderPerBatch
但都没有奏效。
以下是代码示例:
如果我尝试在TextInput
整个列表中输入某些内容会重新渲染,但列表中没有任何变化。我该如何防止这种情况发生?
react-native - 两个平面列表中的选择数据 + 验证 - 反应原生
我试图将来自两个平面列表的数据保存在我的 firestore 数据库中。我必须在每个平面列表中选择一个元素,然后单击按钮将此数据添加到数据库中。
如何创建一个将两个函数renderItem1和renderItem2的项目作为参数的函数,以便检索每个平面列表中的数据
react-native - React Native:如何正确地将 renderItem 项传递给 FlatList,以便它们可以在另一个组件中呈现?
为了测试平面列表的工作方式,我尝试使用另一个组件来显示其中的项目以实现“renderItem”功能。
这是我呈现 FlatList 的代码:
这是我的组件“每个项目”或“泳道”:
所以我想要的是让平面列表显示 2 个“通道”或项目,它们是“myQueue”和“upcomingQueue”。每个“通道”将有一个标题和一个媒体数组,其中包含具有“标题”和“图像”的项目。因此,在我的“Swimlane”组件中,我想为文本执行“swimlaneItem.title”,并有另一个平面列表来呈现所有“媒体”对象,这些对象又将具有“标题”和“媒体”属性。
我怎样才能做到这一点?现在抛出以下错误:
react-native - React Native Flatlist 中的可触摸不透明度关闭
我正在尝试在 react-native 中做可折叠的平面列表,但有一个问题。平面列表卡中有 5 个文本。如果我再放一个文本行(或可触摸的不透明度)并单击折叠,应用程序停止工作并关闭.日志上没有错误/警告消息。为什么会发生这种情况以及任何解决方案?
reactjs - ReferenceError:FlatListItemSeparator 未在 React Native 中定义
我是 React Native 的新手,我正在学习在线教程。这是我的App.js
文件:
代码与教程相同,但是当我尝试运行此代码时,出现错误
ReferenceError:未定义 FlatListItemSeparator
我试图导入FlatListItemSeparator
,但由于它是只读的,我不能。我在 FlatListItemSeparator 和 FlatListHeader 都遇到了这个错误。为什么我会收到此错误,我该如何解决?
reactjs - 如何在 React Native 中创建和导航动态路由或屏幕
我正在开发一个应用程序,它在仪表板上有 6 个图标,当您单击它时,它会将您导航到不同的屏幕我创建了一个可触摸的不透明度来表示每个图标,但问题是我有很多代码重复是否有更好的方法在不重复可触摸不透明度的情况下做到这一点?这是仪表板和所有项目的代码
这是我的导航文件的代码
有没有办法让它更好地链接,包括所有在一个平面列表中?