Open hongwc opened 7 years ago
I had the same problem, and do: 1.Set a state param like this.state = { loadSwiper = false } 2.When componentDidMount, put this.setState({loadSwiper = true}) 3.At the render method, {loadSwiper? <Swiper ...> : null}
In summary, you just re-render the Swiper after componentDidMount
@WhiteClouds2009 works for me, thanks
you can call Swiper after Modal is shown
I had to add a delay to get mine to work, but yes @WhiteClouds2009 it works!
constructor(props) {
super(props);
this.state = { showSwiper: false };
}
componentDidMount() {
// Must use this 100-ms delayed swiper workaround to render on Android properly
setTimeout(() => {
this.setState({showSwiper: true});
}, 100);
}
render() {
var exampleSwiper = (
<Swiper activeDotColor={'white'} loop={false} >
<View style={{width: 100, height: 100, backgroundColor: 'white'}} />
<View style={{width: 100, height: 100, backgroundColor: 'white'}} />
<View style={{width: 100, height: 100, backgroundColor: 'white'}} />
</Swiper>
);
return (
<Modal presentationStyle={'overFullScreen'}>
{this.state.showSwiper ? exampleSwiper : null}
</Modal>
);
}
Even with this workaround, the issue is still happening. Even tried large delay like 2 seconds. Does this still have no solution?
+1 someone please have a look at this
+1
I have this problem when changing the underlying data and popping back to a screen (using react-native-navigator) which contains the Swiper. On the first load if works as expected, but later it doesn't.
Does anyone happen to know what is then root cause , so we can figure out a solution other than workarounds for this problem ?
I think I may have solved this particular problem. I stared with the above 'setTimeOut' solution, then saw that Modal has an event called onShow that is called when the modal has finished it's animation, as such the following seems to work or me:
setSwiperVisible(visible){
this.setState({showSwiper: visible});
}
render(){
return(
<Modal
visible={this.state.modalVisible}
onShow={() => {
this.setSwiperVisible(true)
}}
>
{this.state.showSwiper &&
<Swiper>
...
</Swiper>
}
</Modal>
)
}
Now there's no dependence on timers being right! Let me know if it works for you to.
EDIT Scratch that, only works on the first showing :(
As suggested by @alangumer, this PR solved the problem for me: #761
Hi, is there any update regarding this issue?
Is there any idea why it needs some time delay to show the swiper again? I mean, is it like the rendering part that took so slow or anything else?
if I press Android HardwareHomeKey let the app back Backstage then open my app, swiper lost sliding effect。 My code:
'use strict'; import React, { Component } from 'react'; import { View, Text, Dimensions, Image, TouchableOpacity, Modal, StyleSheet, } from 'react-native'; const { width, height } = Dimensions.get('window'); const imageSource = [ require('../images/guide_page1.png'), require('../images/guide_page2.png'), require('../images/guide_page3.png'), require('../images/guide_page4.png'), ]; import { RatiocalWidth, RatiocalHeight, RatiocalFontSize } from '../style'; import { toastShort } from './ToastUtil'; import Swiper from 'react-native-swiper';
export default class WelcomePage extends Component { constructor(props) { super(props); this.state = { isShowCircleDot: true, } this._renderImg = this._renderImg.bind(this); }
} const styles = StyleSheet.create({ backgroudView: { flexGrow: 1, backgroundColor: '#ffffff', }, swiperImage: { width: width, height: height, /**