Untitled
unknown
javascript
2 years ago
2.3 kB
3
Indexable
import React, { useState } from 'react'; import { View, Image, Text, StyleSheet, TouchableOpacity, ScrollView, } from 'react-native'; const BigSlider = ({ data = [] }) => { const [activeSlide, setActiveSlide] = useState(0); const handleSlideChange = (index) => { setActiveSlide(index); }; return ( <View style={styles.container}> <ScrollView horizontal pagingEnabled showsHorizontalScrollIndicator={false} onMomentumScrollEnd={(event) => { const contentOffset = event.nativeEvent.contentOffset; const slideIndex = Math.round(contentOffset.x / 400); setActiveSlide(slideIndex); }} > {data.map((slide, index) => ( <View key={slide.id} style={styles.slide}> <View style={styles.imageContainer}> <Image source={{ uri: slide.appImageUrl }} style={styles.image} /> </View> </View> ))} </ScrollView> <View style={styles.dotContainer}> {data.map((_, index) => ( <View key={index} style={[ styles.dot, activeSlide === index ? styles.activeDot : styles.notActiveDot, ]} /> ))} </View> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, marginBottom: 20, marginTop: 10, }, slide: { width: 400, height: 200, borderRadius: 20, marginHorizontal: 15, overflow: 'hidden', }, imageContainer: { flex: 1, borderRadius: 20, shadowColor: '#000', shadowOpacity: 1, shadowRadius: 4, shadowOffset: { width: 0, height: 4, }, elevation: 4, // Add this for Android shadow }, image: { flex: 1, borderRadius: 20, resizeMode: 'cover', // Add this to maintain image aspect ratio }, dotContainer: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: 10, }, dot: { width: 8, height: 8, borderRadius: 4, backgroundColor: '#98CB3C', marginHorizontal: 4, }, activeDot: { backgroundColor: '#D63285', }, notActiveDot: { backgroundColor: '#98CB3C', }, }); export default BigSlider;
Editor is loading...