[英]react-native: How to add header animation in ScrollView onScroll
[英]React Native, how to call onScroll event only once inside ScrollView?
我正在使用 React-Native 创建简单的应用程序,我对ScrollView有问题,我的目标是在滚动结束时发送Ajax请求,它应该只发生一次,而不是每次滚动结束时,重要的是我应该只使用ScrollView ,我我正在使用onScroll事件来测量和检测滚动 position。
我尝试了什么:
import * as React from 'react';
import { Text, View, StyleSheet, ScrollView } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
const isCloseToBottom = ({
layoutMeasurement,
contentOffset,
contentSize,
}) => {
const paddingToBottom = 20;
return (
layoutMeasurement.height + contentOffset.y >=
contentSize.height - paddingToBottom
);
};
return (
<ScrollView
style={{ height: 400 }}
showsVerticalScrollIndicator={false}
onScroll={({ nativeEvent }) => {
if (isCloseToBottom(nativeEvent)) {
console.log('Call some async function only once when scroll ends');
}
}}
scrollEventThrottle={2}>
<View>
<View style={{ height: 400 }}>
<View
style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
<Text>SECTION TEXT</Text>
</View>
<View
style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
<Text>SECTION TEXT</Text>
</View>
<View
style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
<Text>SECTION TEXT</Text>
</View>
<View
style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
<Text>SECTION TEXT</Text>
</View>
<View
style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
<Text>SECTION TEXT</Text>
</View>
<View
style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
<Text>SECTION TEXT</Text>
</View>
<View
style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
<Text>SECTION TEXT</Text>
</View>
</View>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
您可以使用带有useRef
钩子和boolean
值的ref
集。 我称它为firstTimeRef
,如下所示:
import * as React from 'react';
import { Text, View, StyleSheet, ScrollView } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
const firstTimeRef = React.useRef(true);
const isCloseToBottom = ({
layoutMeasurement,
contentOffset,
contentSize,
}) => {
const paddingToBottom = 20;
return (
layoutMeasurement.height + contentOffset.y >=
contentSize.height - paddingToBottom
);
};
return (
<ScrollView
style={{ height: 400 }}
showsVerticalScrollIndicator={false}
onScroll={({ nativeEvent }) => {
if (isCloseToBottom(nativeEvent) && firstTimeRef.current) {
firstTimeRef.current=false;
console.log('Call some async function only once when scroll ends');
}
}}
scrollEventThrottle={2}>
<View>
<View style={{ height: 400 }}>
<View
style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
<Text>SECTION TEXT</Text>
</View>
<View
style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
<Text>SECTION TEXT</Text>
</View>
<View
style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
<Text>SECTION TEXT</Text>
</View>
<View
style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
<Text>SECTION TEXT</Text>
</View>
<View
style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
<Text>SECTION TEXT</Text>
</View>
<View
style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
<Text>SECTION TEXT</Text>
</View>
<View
style={{ padding: 20, marginVertical: 30, backgroundColor: 'red' }}>
<Text>SECTION TEXT</Text>
</View>
</View>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.