滚动react-native后如何检查元素是否可见?(跟踪展示次数和点击次数)

IT技术 reactjs react-native intersection-observer impressions
2021-05-21 03:27:14

滚动 react-native 后如何检查元素是否可见?看到了一些react的例子,但我专门寻找react-native。想要跟踪展示次数和点击次数

1个回答

最终实现了一个库

https://www.npmjs.com/package/react-native-component-inview

import InView from 'react-native-component-inview'

const [isInView, setIsInView] = useState(false)

const checkVisible = (isVisible:boolean) => {
    if (isVisible){
      setIsInView(isVisible)
    } else {
      setIsInView(isVisible)
    }
  }

<ScrollView>
  <InView onChange={(isVisible) => this.checkVisible(isVisible)}>
    <View style={[styles.item, {backgroundColor: isInView ? 'yellow' : '#f9c2ff'}]}>
      <Text>yay</Text>
    </View>
  </InView>
</ScrollView>

参考:

https://medium.com/@sanishkr/react-components-tracking-impressions-and-clicks-2fc9af1cc2c

在此处输入图片说明