Я создал поле в react native.
Я хочу показать предупреждение, сколько времени я смахиваю поле. Как это:
Предупреждение: вы проводите пальцем 1/2/3 se c.
Вот мой код:
import React, {useRef} from 'react';
import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
const App = () => {
const pan = useRef(new Animated.ValueXY()).current;
const panResponder = useRef(
PanResponder.create({
onMoveShouldSetPanResponder: () => true,
onPanResponderGrant: () => {
pan.setOffset({
x: pan.x._value,
y: pan.y._value,
});
},
onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}], {
useNativeDriver: false,
}),
onPanResponderRelease: () => {
pan.flattenOffset();
},
}),
).current;
return (
<View style={styles.container}>
<Animated.View
style={{
transform: [{translateX: pan.x}, {translateY: pan.y}],
}}
{...panResponder.panHandlers}>
<View style={styles.box} />
</Animated.View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
box: {
height: 170,
width: 170,
backgroundColor: '#9370db',
marginRight: 10,
borderRadius: 25,
},
});
export default App;
введите описание изображения здесь
На самом деле, я хочу, чтобы после прокрутки этого поля отображалось предупреждение, сколько времени я прокручиваю.
Пожалуйста, помогите!