在 React Native / Snap Carousel 中记录用户交互 - firstItem

Question

我已经遇到这个问题几天了，似乎找不到解决方案。

我想记录用户在数据库上的交互。我正在使用 React Native Snap Carousel 显示数据，并且需要记录用户是否查看了该项目。为此，正如其他堆栈溢出问题中所述，我正在使用“onSnapToItem”。每次从一张幻灯片切换到另一张幻灯片时都会触发 onSnapToItem。然后，如果用户观看幻灯片超过 2 秒，我将其计为一次交互。

问题是 onSnapToItem 没有在 firstItem 上触发（这是有道理的，因为我没有改变幻灯片）。有人能想出解决办法吗？

      <Carousel
              vertical
              layout={"default"}
              ref={_carousel}
              data={promos}
              renderItem={_renderItem}
              autoplay={true}
              autoplayInterval={4000}
              onSnapToItem = { (index) => {
                clearTimeout(writeDelay)
                writeDelay=setTimeout (()=>{
                  console.log(promos[index].id)
                },2000)
                }}
              onEndReached={_retrieveMore}
              />

Answer 1

以编程方式吸附到屏幕焦点上的项目。

componentDidMount() {
  setTimeout(() => this._carousel.snapToItem(0), 1000);

  // if above code doesn't work then you can try is for first item
  writeDelay=setTimeout (()=>{
     console.log(promos[0].id); // index here is 0 for first item
  },1000)
}

...

render() {
  <Carousel
    ...
    ref={c => { this._carousel = c }}
  />
}`

Answer 2

你可以用这个library@svanboxel/visibility-sensor-react-native

在 React Native / Snap Carousel 中记录用户交互 - firstItem

Recording user interactions in React Native / Snap Carousel - firstItem

carousel

reactjs

react-native