React-Native：无论如何要跟踪用户是否阅读了当前页面上可用的全部内容？

Question

我有这个用例，我想跟踪用户阅读了多少可用内容。在应用程序中，有一个 scrollView，其中存在多个子部分，这些子部分也是可滚动的。我如何跟踪用户已阅读的总内容的百分比？

Answer 1

您可以使用此组件来获取滚动的百分比

import React from 'react';
import {ScrollView, Text, View} from 'react-native';

const scrollPercentage = ({layoutMeasurement, contentOffset, contentSize}) => {
  return ((layoutMeasurement.height + contentOffset.y)/contentSize.height) * 100;
};

function PercentageScrollView({onReadPercentageChanged, children}) {

  return <ScrollView
    onScroll={({nativeEvent}) => {
      onReadPercentageChanged(scrollPercentage(nativeEvent));
    }}
    scrollEventThrottle={400}
  >
    {children}
  </ScrollView>
}

export default PercentageScrollView;

像这样在您的组件中使用：

<PercentageScrollView onReadPercentageChanged={(readPercentage)=>{
  setPercentage(readPercentage);
}}>
  <View>
    ...
  </View>
</PercentageScrollView>

React-Native：无论如何要跟踪用户是否阅读了当前页面上可用的全部内容？

React-Native: Is there anyway to track whether user has read the whole content available on the current page?

scrollview

react-native