探索React Native Page ScrollView：一种创新的滚动视图解决方案

import React from 'react';
import { ScrollView, Text, View } from 'react-native';
 
export default class PageScrollView extends React.Component {
  render() {
    return (
      <ScrollView
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        onScroll={this.handleScroll}
        scrollEventThrottle={16}
      >
        <View style={{ width: '100%', height: 200, backgroundColor: 'red' }} />
        <View style={{ width: '100%', height: 200, backgroundColor: 'blue' }} />
        <View style={{ width: '100%', height: 200, backgroundColor: 'green' }} />
      </ScrollView>
    );
  }
 
  handleScroll = (event) => {
    const { contentOffset } = event.nativeEvent;
    const viewWidth = this.scrollView.getBoundingClientRect().width;
    const index = Math.floor(contentOffset.x / viewWidth);
    console.log('Current Page Index:', index);
  }
}

这个代码实例展示了如何使用React Native的ScrollView组件来创建一个横向滚动的视图，其中每个子视图都是一个页面。pagingEnabled属性确保了滚动时只能看到整个页面。onScroll事件用于跟踪当前用户正在查看的页面索引。