技術標籤：React Nativereact native

先看效果圖：

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

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/
 
[email protected]/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;