问题标签 [react-native-flatlist]

I have a horizontal flat list where each item is width:300 All I am trying to do is to get index of currently visible item.

Tried this:

And something like this:

but nothing is accurate I always get one index up or one index down.
What am I doing wrong and how to get correct current index in flat list?

For example I get to list item that is 8th in a list but I get index 9 or 10.

如果我只有一个 column FlatList，LayoutAnimation则通过平滑地向上滑动到已删除项目的位置来正确地动画从列表中删除一个元素。

如果我设置FlatListprop numColumns={2}（或更大）来制作项目网格，则从列表中删除项目不再通过缓动正确动画。现在删除一个项目时，网格中的项目在它淡出后淡出，然后淡入，所选项目现在消失了。

如何FlatList正确制作多列动画删除？

“改用新的 FlatList 或 SectionList 组件。除了简化 API 之外，新的列表组件还具有显着的性能增强，主要是任意数量的行的内存使用几乎恒定。”

这在 React Native 的官方文档中有说明。但是，无论我多么努力，FlatList 内存使用量在向下滚动时都会不断飙升。与使用更少内存的 ListView 组件相比。

非常奇怪的行为，我使用的是FlatList，在它上面有 2 个浮动按钮 ( TouchableOpacity) （绝对位置），当它们被按下时，它们的背景颜色变成黑色。这仅在 IOS 上发生。

代码：

使成为

我试过的：

- 将背景颜色设置为清除，但没有成功。

- 在下面添加不同的图层，没有成功。

- 这仅在显示在列表中时发生，ListView也会发生。

我正在尝试从从 api 获取的 json 中呈现 FlatList，但我不断收到此错误：

相关代码：

我确信有一个简单的解决方法，但是经过几天尝试不同的事情后，我还没有找到它。谢谢你的帮助！

React Native 的新手，但我有一组数据

它在 props 中传递给我的组件，然后我将其置于构造函数中的状态

我在模态中也有一个 FlatList：

我试图只显示键名列表（image1、image2、image3、image4），然后当用户按下其中一个键名时，它将改变 PortraitImage 状态。

这就是我现在所拥有的，但我的 FlatList 似乎是空白的并且什么也没有显示。我不明白为什么列表是空白的。

当我设置 data = {this.props.list} 而不是 state 我得到

元素类型无效：需要一个字符串（对于内置组件）或>一个类/函数（对于复合组件），但得到：未定义。您 > 可能忘记从定义它的文件中导出您的组件。

所以我正在尝试创建一个具有 2 个兄弟视图 TextInput 和 FlatList 的自动完成搜索框（仅在 时显示this.state.data.length> 0）所以我的渲染函数如下所示： -

问题是当我单击列表项时，第一次单击触发onEndEditing回调，TextInput然后第二次单击触发列表项onPress的回调TouchableOpacity。

请问如何在第一次点击时触发列表项的onPress？

嘿，所以可以说我有一个FlatList并想改变它我该renderItem怎么做？

在上面的代码中，一旦触发，我该如何更改<Video />以包含paused属性？onViewableItemsChanged

提前致谢

我想做一个动画标题。

1. 我创建了一个 FlatList 的动画组件，
2. 使用onScroll函数更新动画值。
3. 使用绝对位置放置一个视图 (Animated.View) 作为动画 FlatList 上方的标题。
4. 最后，使用变换属性插入动画值以更改视图 (Animated.View)。

动画效果很好，但动画一点也不流畅。

我看到了这个问题如何使用scrollEventThrottle有助于平滑度。所以我认为使用 FlatList 会很顺利，但事实并非如此。如果按下时滚动，则很流畅。但是如果你滚动并离开手指，它会很跳跃（我不知道如何描述它。对不起）。滚动很流畅，但动画视图（标题）动画一点也不流畅。

环境

• 反应：16.0.0-alpha.12，
• 反应原生：^0.47.0，
• 节点：v7.7.3
• npm：4.1.2
• 纱线：0.21.3

目标平台： iOS和Android

构建工具： expo

链接到小吃演示

更新

因此，我尝试使用 ScrollView 实现相同的功能。但是，我认为，与 FlatList 相比，使用 ScrollView 的情况更糟。

这是世博小吃演示：Animated ScrollView Header

我想我需要先提一下我是如何来到这里的。因此，我尝试通过Medium 中的一个非常好的教程以及观看Brent 的这个很棒的 youtube react conf viedo来实现这一点。但是，youtube 视频上使用的确切代码具有相同的效果。另外，在 Medium 教程中，作者给出了一个指向他的expo Animated header 链接的链接，效果非常好。但是当我复制粘贴代码时，相同的代码无法顺利运行。所以，我认为问题在于反应或反应本机版本。如果我有任何新的更新，我会更新。谢谢你。

我有一个自动完成框，它给了我一个自动完成项目的列表。我在 FlatList 中显示项目，我在 FlatList 周围也有一个边框。我的代码如下： -

如何根据列表项的数量增加/减少 FlatList 的大小（我认为边框是此错误背后的原因）。