问题标签 [react-native-flatlist]

I have a RN (0.44.2) mobx (3.1.10) app which uses a FlatList. I'm basically following https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb

When using my own store, opposed to the examples, I'm having to use toJS() in order to get the FlastList to render

I'm really struggling to figure out why toJS() might be needed in some cases and not others.

My store is setting the images observable like this

As a follow up question, I'm not sure why I need to do the following this.images.replace(imgs) where as in the tutorial he simply did does this.tracks = response.data.tracks.items which triggers the observable just fine.

If anyone has suggestions, I would very much appreciate it.

我正在构建一个使用Redux和React-Navigation库的应用程序。我在 FlatList 中有一个锻炼列表：

这正确显示了我的列表，我可以导航到我单击的每一行的特定锻炼页面，并在每次单击时提供附加的锻炼。在这个特定的锻炼页面上，我有一个编辑锻炼表单，例如，用户可以在其中更新锻炼的名称和时间。

所有这一切都没有问题......当我按下菜单上的后退按钮时，我遇到的问题将我带回到所有锻炼的主列表。FlatList 仍然显示旧数据，是我的问题的根源。它正在缓存这些数据，因此不会显示我的新保存，因此当我再次单击列表项时，它会附加旧的锻炼信息而不是我刚刚保存的最新信息。（希望这是有道理的）

我看到了一个有点类似的问题：React Navigation: How to update navigation title for parent, when value from redux and get updated in child? 但它并没有完全概括我的主要问题：

FlatList 是否可以从 redux 设置中更新特定行，同时保持其滚动位置？

我看到这在 Facebook 应用程序上运行得非常好......当有人向下滚动他们的墙时，假设他们点击了“xx 评论”的项目。这会将应用导航到仅显示此帖子的页面。您可以点赞/评论，当您按下后退箭头时，您会回到原来的墙的滚动位置，并且点赞/评论的数量已更新以显示您的贡献。这在 React Native 中可行吗？

如果这是不可能的......有没有人知道从 React-Navigation 中的后退按钮导航时如何至少刷新页面？

编辑如果其他地方有更好的设置，我愿意使用另一个导航库！

更新 我尝试了几种方法来解决这个问题，我尝试的一种方法是：

当我成功保存表单时，我发送了一个“NEEDS_REFRESHING”操作。这设置了我在 FlatList 主页面上获取的 redux 道具。在该页面的渲染中，我有一个：

我看到了控制台，并且我的 FlatList 页面正在正确刷新（它没有让我回到正确的滚动位置，因为它只是刷新了主列表）......但我总是收到来自 React Native 的警告说：

在现有状态转换期间无法更新（例如在 render或另一个组件的构造函数内）。渲染方法应该是 props 和 state 的纯函数；构造函数副作用是一种反模式，但可以移至componentWillMount.

当我将其移至 componentWillMount 时，从未调用过正确的刷新更改，甚至 componentWillMount 中的 console.log 也不会出现。

我有一个FlatList我想根据方向更改列数的地方。但是，当我这样做时，我得到了红屏。根据红屏错误消息，我不太确定应该如何更改密钥道具。任何帮助表示赞赏。

我一直在尝试使 FlatList 与居中的内容一起工作，但有一个问题。

当我将属性centerContent（从 ScrollView）设置true为滚动时不起作用，因为内容小于 ScrollView。

当内容居中且较小时，您能想出任何方法来保持刷新工作吗？

我<FlatList>用来渲染一个列表：

数据的总大小约为 300。所以我可以看到一些数据被显示，而其他数据被呈现为列表项。

此时（一些数据仍在渲染中），如果我触摸一个项目，会有延迟。我必须等待很长时间才能得到回复。即使按下返回按钮，我也必须等待。

是否有任何解决方案可以让列表首先响应我的触摸动作？

我的解决方案

好吧，我通过一次渲染 10 个项目解决了这个问题。

我会将更多数据推this.state.listdata送到onEndReached

为我工作。

我想让我的水平 FlatList（启用分页）向左或向右滚动，以使内容始终位于屏幕中心，并且下一个和上一个内容仍然出现。

像这样的东西（用于水平动作）

但不幸的是，当平面列表滚动时，滚动的长度与平面列表或其父级的宽度相同，我无法达到我想要的效果。

您好我开始使用 FlatList 组件而不是 ListView 并且在尝试呈现分隔符时遇到了一些问题，我制作了一个多选组件并且它工作正常，但我不明白为什么它没有从flatlist，如果我将分隔符放在 renderItem 函数中，它可以正常工作，但我想将 flatlist 中的它用作道具。

一件奇怪的事情是，如果我在 render 方法中从 FlatList 中删除 itemSeparatorComponent 道具，该组件将停止更新指示该项目已被选中的复选标记 (renderIndicator())，所以这真的很烦人，我放了整个代码，请检查它。

反应原生：0.44.0

我只是第一次开发一个 react-native 应用程序。我正在使用导航，并且必须使用 react-nativereact-native-router-flux创建一个显示提要Image和组件的提要页面。问题是，应用程序从远程服务器获取一些数据的速度非常慢，即使使用本地主机也是如此。TextFlatList

数据格式如下

我试图从浏览器访问 api url，它也做得很快。但是当我通过我的 react-native 应用程序访问时，它太慢了。像 7 秒等待页面完成加载获取数据。我认为问题出在我使用来自远程数据的图像时。我是这样做的

这可以提高速度吗？使用加载遥控器Image会影响速度吗？或者我必须使用延迟图像加载概念加载图像？

我有一个FlatList显示用户评论的，我还想用用户的配置文件填充标题（这是与获取评论的网络调用不同的网络调用）。

如下render()所示：

然后renderHeader看起来像：

我使用fetchincomponentWillMount然后setState为了获取数据（这部分工作正常）。现在我在模拟器上遇到的错误是

undefined 不是对象（评估“this.state.profile”）

但是当我删除该renderHeader方法时，会正确获取注释。

由于我对 RN 很陌生，你能帮我理解什么是错误的以及如何解决它吗？

我有一个 FlatList，它来自视图状态中定义的数组。通过过滤原始数组并将数组设置为新过滤数组的状态来过滤列表。但是仅在滚动列表时才调用重新渲染。有没有办法强制重新渲染平面列表？