63 lines
1.6 KiB
JavaScript
63 lines
1.6 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) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<ScrollView
|
|
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,
|
|
}
|
|
}); |