将react-native-swiper设置loop=true后，发现重新渲染的时候出现bug

原创于 2018-03-29 16:26:22 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

React Native 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了解决React Native Swiper组件在特定条件下运行不正确的问题。通过修改源代码中的componentWillReceiveProps方法并提供了一个替代方案来解决autoplay属性导致的问题。此外还提供了一种在组件更新后自动滚动到初始位置的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决：

You should find this in .../node_modules/react-native-swiper/src/index.js

componentWillReceiveProps (nextProps) {
    if (!nextProps.autoplay && this.autoplayTimer) clearTimeout(this.autoplayTimer)
    this.setState(this.initState(nextProps, this.props.index !== nextProps.index))
}

plz remove this and try again, it will be run correctly.

原帖：https://github.com/leecade/react-native-swiper/issues/731

我的方法：渲染更新后设置滑动到0

                                 <Swiper  

                                ref="scrollView"

                                loop = {true}

                                horizontal={true}

                                showsHorizontalScrollIndicator={false}

                                pagingEnabled={true}

                                >

                                      {this.state.TestPromotionData.map((key, i) => this.renderPromotion(key, i))}

                                </Swiper>





             componentDidUpdate() {

   
                     var ScrollView = this.refs.scrollView;

                    ScrollView.scrollBy(0, false)

           }

推荐改用：https://github.com/rilyu/teaset