react native封装ScrollView，实现(滑到底部)和(滑到顶部+手指继续向下滑)时拉取新数据-编程知识

react native封装ScrollView，实现(滑到底部)和(滑到顶部+手指继续向下滑)时拉取新数据

里面的tw是在react native中使用tailwind的第三方库
只求读者把样式看个大概，主要还是功能的实现
ScrollView的官方文档如下
https://reactnative.cn/docs/scrollview

import tw from 'twrnc'
import { View, Text, ScrollView, RefreshControl } from 'react-native'
import { useState, useEffect } from 'react'const MyScrollView = ({ }) => {const [data, setData] = useState([]);const [refreshing, setRefreshing] = useState(false);const handleTopRefresh = () => {// 防抖if (refreshing === false) {setRefreshing(true);console.log("触发上拉刷新")setTimeout(() => {console.log("拿到新数据")setRefreshing(false);}, 1500);}};const handleBottomRefresh = (e) => {// 防抖if (refreshing === false) {const offsetY = e.nativeEvent.contentOffset.y; //滑动距离const contentSizeHeight = e.nativeEvent.contentSize.height; //scrollView contentSize高度const scrollHeight = e.nativeEvent.layoutMeasurement.height; //scrollView高度//似乎有时会有误差，比如滑到底部但是(755.9999771118164<756)，我的解决思路是取ceilif (Math.ceil(offsetY + scrollHeight) >= contentSizeHeight) {console.log("触发底部刷新")setRefreshing(true);setTimeout(() => {console.log("拿到新数据")setRefreshing(false);}, 1500);}}}useEffect(() => {const res = [];for (let i = 0; i < 19; i++) {res.push(i);}setData(res);}, [])return (<ScrollViewrefreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleTopRefresh} />}onMomentumScrollEnd={handleBottomRefresh}style={tw`flex-1`}><View style={tw`gap-1 `}>{data.map((item, idx) => (<Text style={tw`text-center text-3xl bg-yellow-200`} key={idx}>{item}</Text>))}</View></ScrollView>)
}export default MyScrollView;

演示动画注意看终端里的输出
在这里插入图片描述

顺便看到了一个Toast组件，直接拿来当做加载后的提示了
https://github.com/calintamas/react-native-toast-message/tree/main
在这里插入图片描述

秉持着不水短文章的做法，附加上我自己写的白屏加载组件
Modal应该是absolute的组件，所以这个组件放哪都行
这里我查资料的时候才知道官方有写好了加载动画组件

import tw from 'twrnc'
import { View, Modal, ActivityIndicator } from 'react-native'const Loading = ({ visible = false }) => {return (<Modal visible={visible} transparent={true}><View style={tw`bg-white opacity-80 h-full w-full items-center justify-center`}><ActivityIndicator size="large" color="#0000ff" /></View></Modal>)
}export default Loading;