Javascript 如何在RN平面列表中获取当前可见的索引
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45868284/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get currently visible index in RN flat list
提问by 1110
I have a horizontal flat list where each item is width:300All I am trying to do is to get index of currently visible item.
我有一个水平平面列表，其中每个项目都是width:300我想要做的就是获取当前可见项目的索引。
<FlatList
onScroll={(e) => this.handleScroll(e)}
horizontal={true}
data={this.state.data}
renderItem...
Tried this:
试过这个：
handleScroll(event) {
let index = Math.ceil(
event.nativeEvent.contentOffset.x / 300
);
And something like this:
和这样的事情：
handleScroll(event) {
let contentOffset = event.nativeEvent.contentOffset;
let index = Math.floor(contentOffset.x / 300);
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.
但没有什么是准确的，我总是让一个指数上升或一个指数下降。
我做错了什么以及如何在平面列表中获得正确的当前索引？
例如，我可以列出列表中第 8 位的项目，但我得到索引 9 或 10。
回答by Roman Osypov
UPD. thanks to fzyzcjy for pointing that onViewableItemsChanged shouldn`t be updated
更新。感谢 fzyzcjy 指出不应更新 onViewableItemsChanged
You can use FlatList onViewableItemsChangedprop to get what you want.
您可以使用 FlatListonViewableItemsChanged道具来获得您想要的。
class Test extends React.Component {
onViewableItemsChanged = ({ viewableItems, changed }) => {
console.log("Visible items are", viewableItems);
console.log("Changed in this iteration", changed);
}
render () => {
return (
<FlatList
onViewableItemsChanged={this.onViewableItemsChanged }
viewabilityConfig={{
itemVisiblePercentThreshold: 50
}}
/>
)
}
}
viewabilityConfigcan help you to make whatever you want with viewability settings. In code example 50means that item is considered visible if it is visible for more than 50 percents.
viewabilityConfig可以通过可见度设置帮助您制作任何您想要的东西。在代码示例中50意味着如果项目可见的时间超过 50%，则该项目被认为是可见的。
Config stucture can be found here
配置结构可以在这里找到
回答by ch271828n
Many thanks to the most-voted answer :) However, it does not work when I try it, raising an error saying that changing onViewableItemsChanged on the fly is not supported. After some search, I find the solution here. Here is the full code that can run without error. The key point is that the two configs should be put as class propertiesinstead of inside the render() function.
非常感谢投票最多的答案 :) 但是，当我尝试它时它不起作用，引发了一个错误，说changing onViewableItemsChanged on the fly is not supported. 经过一番搜索，我在这里找到了解决方案。这是可以无错误运行的完整代码。关键是这两个配置应该作为类属性而不是放在 render() 函数中。
class MyComponent extends Component {
_onViewableItemsChanged = ({ viewableItems, changed }) => {
console.log("Visible items are", viewableItems);
console.log("Changed in this iteration", changed);
};
_viewabilityConfig = {
itemVisiblePercentThreshold: 50
};
render() {
return (
<FlatList
onViewableItemsChanged={this._onViewableItemsChanged}
viewabilityConfig={this._viewabilityConfig}
{...this.props}
/>
</View>
);
}
}
回答by Sujit
this.handleScroll = (event) => {
let yOffset = event.nativeEvent.contentOffset.y
let contentHeight = event.nativeEvent.contentSize.height
let value = yOffset / contentHeight
}
<FlatList onScroll={this.handleScroll} />
Get the round-off value to calculate the page-number/index.
获取舍入值以计算页码/索引。
回答by tiran
With related to @fzyzcjy's and @Roman's answers. In react, 16.8+ you can use uscCallbackto handle the changing onViewableItemsChanged on the fly is not supportederror.
与@fzyzcjy 和@Roman 的答案有关。在反应中，您可以使用 16.8+uscCallback来处理changing onViewableItemsChanged on the fly is not supported错误。
function MyComponent(props) {
const _onViewableItemsChanged = useCallback(({ viewableItems, changed }) => {
console.log("Visible items are", viewableItems);
console.log("Changed in this iteration", changed);
}, []);
const _viewabilityConfig = {
itemVisiblePercentThreshold: 50
}
return <FlatList
onViewableItemsChanged={_onViewableItemsChanged}
viewabilityConfig={_viewabilityConfig}
{...props}
/>;
}
回答by RY Zheng
In your case, I guess, you might ignore the paddingor marginof items. The contentOffsetXor contentOffsetYshould be firstViewableItemIndex* (itemWidth+ item padding or margin).
在你的情况下，我猜你可能会忽略项目的paddingor margin。的contentOffsetX或contentOffsetY应该是firstViewableItemIndex*（itemWidth+ item padding or margin）。
As other answers, onViewableItemsChangedwould be a better choice to meet your requirement. I wrote an article about how to use it and how it is implemented.
https://suelan.github.io/2020/01/21/onViewableItemsChanged/
作为其他答案，onViewableItemsChanged将是满足您要求的更好选择。我写了一篇关于如何使用它以及它是如何实现的文章。
https://suelan.github.io/2020/01/21/onViewableItemsChanged/
