React Native使用FlatList组件实现水平滚动翻页

先看效果图：

主要利用到以下二个方法：

1、在一个onScrollBeginDrag回调方法（开始拖动时触发）中记录event.nativeEvent.contentOffset.x：X轴滚动的偏移量。

2、在一个 onScrollEndDrag回调方法（拖动结束时触发）中记录event.nativeEvent.contentOffset.x：X轴滚动的偏移量。

（1）若开始拖拽的偏移量 < 拖动.x，则表示向后翻页。
（2）若开始拖拽的偏移量 >拖动.x，则表示向前翻页。

利用onScroll滚动事件也可以判断是水平向前滚动还是向后滚动，但是这个onScroll事件在一次拖拽开始到拖拽结束会调用多次，所以我没有采用这个方法。

代码：

import React, {FC, useEffect, useState} from 'react';
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  Image,
  TouchableOpacity,
  FlatList,
} from 'react-native';

// @ts-ignore
const Personnel: FC<StackScreenProps<RootStackParamList, 'Personnel'>> = (props) =>{

  const [inputValue, setInputValue] = useState('')
  const [users, setUsers] = useState<User[]>([])
  const [currentPage, setCurrentPage] = useState(1)
  const [scrollViewStartOffsetX, setScrollViewStartOffsetX] = useState(1)

  useEffect(() => {
  var data = [
  {
    name: '小男,
    sex: '男',
    uuid: '#2',
    post: '列车管理员',
    photo_path: 'https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/img/header_logo.svg',
    safety_level: '1.0',
    skill_level: '1.0',
    birthday: '36443.0'
  },
  ......
  ]
  setUsers([...users,...data]);//将数据传给users
  }, []);

//开始拖拽
  const onScrollBeginDrag = (e: { nativeEvent: { contentOffset: { x: any; }; }; }) => {
    const offsetX = e.nativeEvent.contentOffset.x;//记录拖拽前的X偏移量 0
    setScrollViewStartOffsetX(e.nativeEvent.contentOffset.x)
    console.log('开始拖拽',offsetX)
  }

//拖拽结束
  const onScrollEndDrag = (e: { nativeEvent: { contentOffset: { x: any; }; }; }) => {
    //event.nativeEvent.contentOffset.y表示Y轴滚动的偏移量
    const offsetX = e.nativeEvent.contentOffset.x;//记录拖拽前的X偏移量 0
    console.log('拖拽结束：',offsetX,scrollViewStartOffsetX)
    
    if (scrollViewStartOffsetX > offsetX) {//往前翻页
      if (currentPage !== 1 && currentPage > 0) {
        setCurrentPage(currentPage - 1)
        console.log('向前翻页')
      }

    } else if (scrollViewStartOffsetX < offsetX) {
      if (currentPage < users.length) {
        setCurrentPage(currentPage + 1)
        console.log('向后翻页')
      }
    }
  }

//开始滚动
  const onScroll = (e: { nativeEvent: { contentOffset: { x: any; }; }; }) => {
    console.log('开始滚动')
  }

  // @ts-ignore
  const renderToolItem = ({item}) => {
    return (
              <View style={styles.center_item_box}>
                <Image source={require('../img/cute.png')} style={styles.tx}/>
                <View style={styles.center_box}>
                  <Text style={styles.name}>{item.name}</Text>
                  <View style={styles.center_item}>
                    <Text style={styles.type}>工号：</Text>
                    <Text style={styles.value}>{item.uuid}</Text>
                  </View>
                  <View style={styles.center_item}>
                    <Text style={styles.type}>性别：</Text>
                    <Text style={styles.value}>{item.sex}</Text>
                  </View>
                  <View style={styles.center_item}>
                    <Text style={styles.type}>出生年月：</Text>
                    <Text style={styles.value}>{item.birthday}</Text>
                  </View>
                  <View style={styles.center_item}>
                    <Text style={styles.type}>职务：</Text>
                    <Text style={styles.value}>{item.post}</Text>
                  </View>
                  <View style={styles.center_item}>
                    <Text style={styles.type}>安全等级：</Text>
                    <Text style={styles.value}>{item.safetyLevel}</Text>
                  </View>
                  <View style={styles.center_item}>
                    <Text style={styles.type}>技能等级：</Text>
                    <Text style={styles.value}>{item.skillLevel}</Text>
                  </View>
                </View>
              </View>
    )
  }

    return (
              <View style={styles.bjm}>
                <View style={styles.top}>
                  <TextInput placeholder='请输入人员名称'
                             placeholderTextColor='#949494'
                             onChangeText={value => setInputValue(value)}
                             onSubmitEditing={()=>onSearch()}
                             style={styles.header}
                  />
                  <Image source={require('../img/search.png')} style={styles.search_msg}/>
                </View>
                <View style={styles.center}>
                  {users.length > 0 ?
                    <FlatList
                      data={users}
                      pagingEnabled={true} //整数倍滚动
                      keyExtractor={(item, index) => index}
                      renderItem={renderToolItem}
                      horizontal={true}
                      showsHorizontalScrollIndicator={false}
                      scrollEventThrottle={300}//设置300，一帧回调一次这个onScroll方法，但是没啥用
                      onScroll={onScroll}
                      onScrollBeginDrag={onScrollBeginDrag} // 开始拖拽时调用的方法
                      onScrollEndDrag={onScrollEndDrag} // 结束拖拽时调用的方法
                    />
                    :
                    <Text style={styles.noWork}>还没有人员，请点击右下角导入人员</Text>
                  }
                </View>
                <Text style={styles.pageCount}>{currentPage}/{users.length}</Text>
                <TouchableOpacity onPress={()=>onAddFiles()} activeOpacity={0.9}>
                  <Image source={require('../img/add.png')} style={styles.bottom}/>
                </TouchableOpacity>
              </View>
    )
}

});

export default Personnel;