Files
EMI-ExpoAPP/Views/Slideshow.js
T
2024-10-04 01:34:24 -04:00

52 lines
1.7 KiB
JavaScript

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Text, List, RadioButton } from "react-native-paper";
import { Image } from 'expo-image'; // Import Image from expo-image
let Slideshow = (props) => {
//console.log(route.params.postid)
//return <SinglePostComponent postId={route.params.postid} />;
//console.log('RenderSlideSHow', props)
const images = props.route.params.images;
[imageIndex, setImageIndex] = React.useState(props.route.params.startIndex);
// images.length
// console.log(imageIndex);
// console.log(images[imageIndex][1], images.length);
let touchY = 0;
let touchX = 0;
return (
<View
style={{ padding: 10, paddingTop: 20, flex: 1, justifyContent: "center" }}
onTouchStart={e => {
//console.log(e.nativeEvent)
touchY = e.nativeEvent.pageY
touchX = e.nativeEvent.pageX
}}
onTouchEnd={e => {
if ((touchX - e.nativeEvent.pageX > 20) && (images.length - 1 > imageIndex))
setImageIndex(imageIndex + 1)
if ((touchX - e.nativeEvent.pageX < -20) && (imageIndex > 0))
setImageIndex(imageIndex - 1)
}}
>
<Text style={styles.countText}>{imageIndex+1}/{images.length}</Text>
<Image source={{ uri: images[imageIndex][1] }} key={images[imageIndex][1]} style={styles.image} cachePolicy="memory-disk"/>
</View>
)
};
const styles = StyleSheet.create({
image: {
width: "100%",
height: "100%",
resizeMode: "contain",
},
countText: {
position: 'absolute',
left: '50%',
bottom: 10
}
});
export default Slideshow;