79 lines
2.1 KiB
JavaScript
79 lines
2.1 KiB
JavaScript
import React from 'react'
|
|
import { View, ScrollView, Text, StyleSheet, Image, ImageBackground, TouchableOpacity } from 'react-native'
|
|
import Theme from '../theme.style.js';
|
|
|
|
export default function BoardCarousel(props) {
|
|
|
|
const [scrollView, setscrollView] = React.useState(null);
|
|
let interval;
|
|
|
|
React.useEffect(() => {
|
|
// setInterval(function(){
|
|
// // if(scrollView) scrollView.scrollTo({x: 0, y: `${100 * props.intervals}%`, animated: true})
|
|
// if(scrollView) scrollView.scrollTo({x: 0, y: 100, animated: true})
|
|
// // console.log(scrollView.isTouching)
|
|
// }, 3000)
|
|
// return () => {
|
|
// clearInterval(interval)
|
|
// }
|
|
}, [])
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<ScrollView
|
|
ref={(el) => setscrollView(el)}
|
|
horizontal={true}
|
|
contentContainerStyle={{ ...styles.scrollView, width: `${100 * props.intervals}%` }}
|
|
showsHorizontalScrollIndicator={false}
|
|
onContentSizeChange={props.onContentSizeChange}
|
|
onScroll={props.onScroll}
|
|
scrollEventThrottle={200}
|
|
pagingEnabled
|
|
decelerationRate="fast"
|
|
>
|
|
{props.items.map((item, index) => {
|
|
return (
|
|
<TouchableOpacity activeOpacity={1} key={index} style={{flex: 1, width: '100%', backgroundColor: '#fff', borderRadius: 15}}>
|
|
<Image source={item ? {uri: item} : {uri: ''}} style={{width: '100%', height: '100%', resizeMode: 'stretch', borderRadius: 15}} />
|
|
</TouchableOpacity>
|
|
)
|
|
})}
|
|
</ScrollView>
|
|
<View style={styles.bullets}>
|
|
{props.bullets}
|
|
</View>
|
|
</View>)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
statsHead: {
|
|
paddingTop: 10,
|
|
paddingHorizontal: 12,
|
|
},
|
|
container: {
|
|
height: '100%',
|
|
width: '100%',
|
|
backgroundColor: '#fbfbfb',
|
|
shadowColor: '#fcfcfc',
|
|
shadowOpacity: 1,
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 5
|
|
},
|
|
},
|
|
scrollView: {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
overflow: 'hidden',
|
|
width: '100%',
|
|
height: '100%'
|
|
},
|
|
bullets: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: 10,
|
|
paddingTop: 20,
|
|
}
|
|
}); |