leecade / react-native-swiper

The best Swiper component for React Native.
MIT License
10.42k stars 2.34k forks source link

Returning from other pages come, not automatically broadcast #336

Open usergyt opened 7 years ago

usergyt commented 7 years ago

This is my code:

        <Swiper height={200}
                            paginationStyle={{bottom:10}}
                            autoplay={true}
                    >
                        <View style={styles.slide}>
                            <Image style={styles.image} source={require('Almond/res/images/banner1.jpg')}/>
                        </View>
                        <View style={styles.slide}>
                            <Image style={styles.image} source={require('Almond/res/images/banner2.jpg')}/>
                        </View>
                        <View style={styles.slide}>
                            <Image style={styles.image} source={require('Almond/res/images/banner3.jpg')}/>
                        </View>
                    </Swiper>
sazedulhaque commented 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

usergyt commented 7 years ago

@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>
// )

}

sazedulhaque commented 7 years ago

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