From c344cd7355c3513c1fec2b5cb1e6df63138c69a7 Mon Sep 17 00:00:00 2001 From: Alarees Date: Tue, 21 Dec 2021 21:13:03 +0200 Subject: [PATCH 1/3] add startPrefix, endPrefix, imageKey props --- ImageSlider.js | 86 ++++++++++++++++++++++++++------------------------ 1 file changed, 45 insertions(+), 41 deletions(-) diff --git a/ImageSlider.js b/ImageSlider.js index 965741d..c4d04bb 100644 --- a/ImageSlider.js +++ b/ImageSlider.js @@ -24,7 +24,10 @@ type Slide = { }; type PropsType = { - images: Array, + images: string[], + startPrefix: string, + endPrefix: string, + imageKey: string, style?: any, loop?: boolean, loopBothSides?: boolean, @@ -34,7 +37,6 @@ type PropsType = { onPress?: Object => void, customButtons?: (number, (number, animated?: boolean) => void) => Node, customSlide?: Slide => Node, - imagesWidth: number }; type StateType = { @@ -71,14 +73,9 @@ class ImageSlider extends Component { ); - _move = (index: number, animated: boolean = true, autoCalled: boolean = true) => { - if (!this.autoPlayFlag && autoCalled) { - return; - } + _move = (index: number, animated: boolean = true) => { const isUpdating = index !== this._getPosition(); - const x = (this.props.imagesWidth ? - this.props.imagesWidth : Dimensions.get("window").width) - * index; + const x = Dimensions.get('window').width * index; this._ref && this._ref.scrollTo({ y: 0, x, animated }); @@ -99,14 +96,14 @@ class ImageSlider extends Component { _getPosition() { if (typeof this.props.position === 'number') { - return this.props.position % this.props.images.length; + return this.props.position; } - return this.state.position % this.props.images.length; + return this.state.position; } componentDidUpdate(prevProps: Object) { - const { position, autoPlayFlag } = this.props; - this.autoPlayFlag = autoPlayFlag; + const { position } = this.props; + if (position && prevProps.position !== position) { this._move(position); } @@ -170,7 +167,7 @@ class ImageSlider extends Component { this._setInterval(); }; - componentDidMount() { + componentWillMount() { this._setInterval(); } @@ -185,7 +182,7 @@ class ImageSlider extends Component { _renderImage = (image: any, index: number) => { const { width } = Dimensions.get('window'); - const { onPress, customSlide } = this.props; + const { onPress, customSlide, startPrefix = '', endPrefix = '', imageKey='uri' } = this.props; const offset = { marginLeft: index === -1 ? -width : 0 }; const imageStyle = [styles.image, { width }, offset]; @@ -193,7 +190,20 @@ class ImageSlider extends Component { return customSlide({ item: image, style: imageStyle, index, width }); } - const imageObject = typeof image === 'string' ? { uri: image } : image; + let imageObject = image; + + switch (typeof image) { + case 'string': + imageObject = { uri: startPrefix + image + endPrefix }; + break; + + case 'object': + imageObject = { uri: startPrefix + image[imageKey] + endPrefix }; + break; + + default: + break; + } const imageComponent = ( @@ -220,14 +230,7 @@ class ImageSlider extends Component { // do not scroll. _scrollEnabled = (position: number) => position !== -1 && position !== this.props.images.length; - moveNext = () => { - const next = (this.state.position + 1) % this.props.images.length; - this._move(next, true, false); - } - movePrev = () => { - const prev = (this.state.position + this.props.images.length - 1) % this.props.images.length; - this._move(prev, true, false); - } + render() { const { onPress, @@ -263,22 +266,22 @@ class ImageSlider extends Component { {customButtons ? ( customButtons(position, this._move) ) : ( - - {this.props.images.map((image, index) => ( - this._move(index)} - style={[ - styles.button, - position === index && styles.buttonSelected, - ]} - > - - - ))} - - )} + + {this.props.images.map((image, index) => ( + this._move(index)} + style={[ + styles.button, + position === index && styles.buttonSelected, + ]} + > + + + ))} + + )} {this._popHelperView()} ); @@ -299,7 +302,8 @@ const styles = StyleSheet.create({ }, buttons: { height: 15, - marginTop: -15, + marginTop: -25, + marginBottom: 10, justifyContent: 'center', alignItems: 'center', flexDirection: 'row', From e68d2f60343fda57f797b9e068d107ad5dc60529 Mon Sep 17 00:00:00 2001 From: Alarees Date: Tue, 21 Dec 2021 21:21:31 +0200 Subject: [PATCH 2/3] add startPrefix, endPrefix, imageKey props --- ImageSlider.js | 77 ++++++++++++++++++++++++++++---------------------- 1 file changed, 43 insertions(+), 34 deletions(-) diff --git a/ImageSlider.js b/ImageSlider.js index c4d04bb..d2299e8 100644 --- a/ImageSlider.js +++ b/ImageSlider.js @@ -24,10 +24,10 @@ type Slide = { }; type PropsType = { - images: string[], - startPrefix: string, - endPrefix: string, - imageKey: string, + images: Array, + startPrefix:string, + endPrefix:string, + imageKey:string, style?: any, loop?: boolean, loopBothSides?: boolean, @@ -37,6 +37,7 @@ type PropsType = { onPress?: Object => void, customButtons?: (number, (number, animated?: boolean) => void) => Node, customSlide?: Slide => Node, + imagesWidth: number }; type StateType = { @@ -73,9 +74,14 @@ class ImageSlider extends Component { ); - _move = (index: number, animated: boolean = true) => { + _move = (index: number, animated: boolean = true, autoCalled: boolean = true) => { + if (!this.autoPlayFlag && autoCalled) { + return; + } const isUpdating = index !== this._getPosition(); - const x = Dimensions.get('window').width * index; + const x = (this.props.imagesWidth ? + this.props.imagesWidth : Dimensions.get("window").width) + * index; this._ref && this._ref.scrollTo({ y: 0, x, animated }); @@ -96,14 +102,14 @@ class ImageSlider extends Component { _getPosition() { if (typeof this.props.position === 'number') { - return this.props.position; + return this.props.position % this.props.images.length; } - return this.state.position; + return this.state.position % this.props.images.length; } componentDidUpdate(prevProps: Object) { - const { position } = this.props; - + const { position, autoPlayFlag } = this.props; + this.autoPlayFlag = autoPlayFlag; if (position && prevProps.position !== position) { this._move(position); } @@ -167,7 +173,7 @@ class ImageSlider extends Component { this._setInterval(); }; - componentWillMount() { + componentDidMount() { this._setInterval(); } @@ -182,7 +188,7 @@ class ImageSlider extends Component { _renderImage = (image: any, index: number) => { const { width } = Dimensions.get('window'); - const { onPress, customSlide, startPrefix = '', endPrefix = '', imageKey='uri' } = this.props; + const { onPress, customSlide, startPrefix='', endPrefix='', imageKey='uri' } = this.props; const offset = { marginLeft: index === -1 ? -width : 0 }; const imageStyle = [styles.image, { width }, offset]; @@ -190,8 +196,6 @@ class ImageSlider extends Component { return customSlide({ item: image, style: imageStyle, index, width }); } - let imageObject = image; - switch (typeof image) { case 'string': imageObject = { uri: startPrefix + image + endPrefix }; @@ -204,7 +208,6 @@ class ImageSlider extends Component { default: break; } - const imageComponent = ( ); @@ -230,7 +233,14 @@ class ImageSlider extends Component { // do not scroll. _scrollEnabled = (position: number) => position !== -1 && position !== this.props.images.length; - + moveNext = () => { + const next = (this.state.position + 1) % this.props.images.length; + this._move(next, true, false); + } + movePrev = () => { + const prev = (this.state.position + this.props.images.length - 1) % this.props.images.length; + this._move(prev, true, false); + } render() { const { onPress, @@ -266,22 +276,22 @@ class ImageSlider extends Component { {customButtons ? ( customButtons(position, this._move) ) : ( - - {this.props.images.map((image, index) => ( - this._move(index)} - style={[ - styles.button, - position === index && styles.buttonSelected, - ]} - > - - - ))} - - )} + + {this.props.images.map((image, index) => ( + this._move(index)} + style={[ + styles.button, + position === index && styles.buttonSelected, + ]} + > + + + ))} + + )} {this._popHelperView()} ); @@ -302,8 +312,7 @@ const styles = StyleSheet.create({ }, buttons: { height: 15, - marginTop: -25, - marginBottom: 10, + marginTop: -15, justifyContent: 'center', alignItems: 'center', flexDirection: 'row', From c351d1d1e4d959bcedbdddaea80aa0816148f28e Mon Sep 17 00:00:00 2001 From: Alarees Date: Tue, 12 Sep 2023 07:54:03 +0300 Subject: [PATCH 3/3] Update ImageSlider.js add sevral props --- ImageSlider.js | 28 ++++++++-------------------- 1 file changed, 8 insertions(+), 20 deletions(-) diff --git a/ImageSlider.js b/ImageSlider.js index d2299e8..6f66b5c 100644 --- a/ImageSlider.js +++ b/ImageSlider.js @@ -25,9 +25,8 @@ type Slide = { type PropsType = { images: Array, - startPrefix:string, - endPrefix:string, - imageKey:string, + startString: string, + imageKey: string, style?: any, loop?: boolean, loopBothSides?: boolean, @@ -188,35 +187,25 @@ class ImageSlider extends Component { _renderImage = (image: any, index: number) => { const { width } = Dimensions.get('window'); - const { onPress, customSlide, startPrefix='', endPrefix='', imageKey='uri' } = this.props; + const { onPress, customSlide, startString = '', imageKey = '', imageStyle={}, resizeMode='cover' } = this.props; const offset = { marginLeft: index === -1 ? -width : 0 }; - const imageStyle = [styles.image, { width }, offset]; + const imgStyle = [styles.image, { width }, offset, imageStyle]; if (customSlide) { - return customSlide({ item: image, style: imageStyle, index, width }); + return customSlide({ item: image, style: imgStyle, index, width }); } - switch (typeof image) { - case 'string': - imageObject = { uri: startPrefix + image + endPrefix }; - break; + const imageObject = typeof image === 'string' ? image.includes('file:/') ? { uri: image } : { uri: startString + image } : typeof image === 'object' ? { uri: startString + image[imageKey] } : image; - case 'object': - imageObject = { uri: startPrefix + image[imageKey] + endPrefix }; - break; - - default: - break; - } const imageComponent = ( - + ); if (onPress) { return ( onPress && onPress({ image, index })} delayPressIn={200} > @@ -307,7 +296,6 @@ const styles = StyleSheet.create({ backgroundColor: '#222', }, image: { - width: 200, height: '100%', }, buttons: {