Open usergyt opened 7 years ago
I face the same problem. After coming from another page slider not showing. My code is similar to "usergyt".
Please Help us. Thanks
@sazedulhaque My solution, Using the ios way code。 // if (Platform.OS === 'android') { // this.refs.scrollView && this.refs.scrollViewanimated ? 'setPage' : 'setPageWithoutAnimation' // } else { this.refs.scrollView && this.refs.scrollView.scrollTo({ x, y, animated }) // }
renderScrollView = pages => {
// if (Platform.OS === 'ios') {
return (
<ScrollView ref='scrollView'
{...this.props}
{...this.scrollViewPropOverrides()}
contentContainerStyle={[styles.wrapper, this.props.style]}
contentOffset={this.state.offset}
onScrollBeginDrag={this.onScrollBegin}
onMomentumScrollEnd={this.onScrollEnd}
onScrollEndDrag={this.onScrollEndDrag}>
{pages}
</ScrollView>
)
// }
// console.log('renderScrollView', this.state.index)
// return (
// <ViewPagerAndroid ref='scrollView'
// {...this.props}
// initialPage={this.props.loop ? this.state.index + 1 : this.state.index}
// onPageSelected={this.onScrollEnd}
// style={{flex: 1}}>
// {pages}
// </ViewPagerAndroid>
// )
}
Thanks for your reply, I solved it already with a different approach then yours.code is following it may enlighten others. 1st# is put this to the component's constructor
constructor(props) {
super(props);
this.state = {
SwipLoaded:false,
};
}
2nd# is enable the state on component's load using following code:
componentDidMount(){
setTimeout(() => {
this.setState({
SwipLoaded: true
})
}, 100);
}
then 3rd# is put a condition in the return of render where you will put the Swiper component within the ScrollView or with ScrollView:
render() {
if (this.state.SwipLoaded) {
return (
<View style={styles.container}>
<View style={styles.body}>
<ScrollView style={{ flex: 1 }}>
{loading}
<View style={(styles.ImageSlider)}>
<Swiper style={styles.wrapper}
index={0}
showsButtons={false}
showsPagination={true}
height={240}
activeDotColor={'blue'}
paginationStyle={{ bottom: 10 }}
// autoplay={true} >
<View style={styles.slide1}>
<Image style={[styles.swiperImage]} source={require('./img/car/car1.jpg')} />
</View>
<View style={styles.slide2}>
<Image style={[styles.swiperImage]} source={require('./img/car/car2.jpg')} />
</View>
<View style={styles.slide3}>
<Image style={[styles.swiperImage]} source={require('./img/car/car3.jpg')} />
</View>
</Swiper>
</View>
</ScrollView>
</View>
</View>
);
} else {
return (
<View></View>
);
}
}
Thanks
This is my code: