J'ai travaillé sur cette tâche simple mais je n'ai pas réussi à le faire. Je veux juste une vue contenant une image et deux actions balayables, une lorsque les utilisateurs glissent de gauche à droite et une de droite à gauche. Sans que l'image ne bouge, je veux juste que les rendus glissants se déplacent progressivement sur l'image à mesure que les utilisateurs glissent.
c'est le code que j'ai maintenant
import React, { useRef, useState, useEffect } from 'react';
import { SafeAreaView, FlatList, View, Image, Text, StyleSheet, ScrollView, TouchableOpacity, index, PanResponder, Animated, Dimensions } from 'react-native';
import Swipeable from 'react-native-gesture-handler/Swipeable';
const montage = require("../../assets/mount.jpg")
const Swipeabletest = ({ navigation }) => {
const renderLeftActions = (progress, dragX) => {
const trans = dragX.interpolate({
inputRange: [0, 200],
outputRange: [1, 0],
extrapolate: 'clamp',
});
console.log('Left action translation value:', trans);
return (
<Animated.View
style={{
transform: [{ translateX: trans }],
backgroundColor: 'blue',
width: '100%',
height: 200,
zIndex: 200,
position: 'relative', // Ensure the left action is absolutely positioned
top:0,
left:0,
zIndex:35,
justifyContent:'center',
alignItems:'center',
borderRadius:400/2
}}
>
<Text>Left action</Text>
</Animated.View>
);
};
const renderRightActions = (progress, dragX) => {
const trans = dragX.interpolate({
inputRange: [-200, 0],
outputRange: [0, 1],
extrapolate: 'clamp',
});
console.log('Right action translation value:', trans);
return (
<Animated.View
style={{
transform: [{ translateX: trans }],
backgroundColor: 'red',
width: 200,
height: 200,
zIndex: 34,
// position: 'absolute',
// right: 0,
top:0,
right:0,
justifyContent:'center',
alignItems:'center'
}}
>
<Text>Right action</Text>
</Animated.View>
);
};
return (
<SafeAreaView style={styles.container}>
<View style={{ backgroundColor: 'white', zIndex: 500, width: 200, height: 200, position: 'relative' }}>
<Swipeable
renderLeftActions={renderLeftActions}
renderRightActions={renderRightActions}
>
<View style={{ backgroundColor: 'transparent', width: 200, height: 200, position: 'relative',borderRadius:400/2 }}>
<Image source={montage} style={styles.montagnephotoprofil} />
</View>
</Swipeable>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
montagnephotoprofil: {
width: '100%',
height: '100%',
borderRadius:400/2,
},
});
export default Swipeabletest;
`
Je voudrais comme je l'ai dis juste les éléments à droite et à gauche de se deplacer au-dessus de l'image/view "principale" celle que l'utilisateur voit des le départ.
Merci de votre aide