简单的自动播放库与Flickity和React。

Question

所以，我试图用Flickity和React制作一个这样的图库，但我会出现一些奇怪的闪烁，直到我尝试调整（输出）窗口的大小，然后一切都很好地播放，动画才会开始。在Firefox上，有时它有效，有时它不起作用，而Chrome拒绝完全合作。也许，值得一提的是，我用普通的Javascript和Flickity完成了这项工作，所以我想我在React中做错了什么。这是代码：

HTML：

<div id="main"></div>

ReactJS

var Gallery = React.createClass({
    componentDidMount: function() {
        this.flkty = new Flickity('.gallery', {
            freeScroll: true,
            wrapAround: true,
            prevNextButtons: false,
            pageDots: false,
            freeScrollFriction: 0.00,
            lazyLoad: 2
        });
        this.flkty.velocity = 1;
        this.flkty.isFreeScrolling = true;
        this.flkty.startAnimation();
    },
    render: function() {
    return (
        <div className="gallery">
            <div key="01" className="gallery-cell">
                <img src="http://placehold.it/450x1500" />
            </div>
            <div key="02" className="gallery-cell">
                <img src="http://placehold.it/850x1200" />
            </div>
            <div key="03" className="gallery-cell">
                <img src="http://placehold.it/150x1500" />
            </div>
            <div key="04" className="gallery-cell">
                <img src="http://placehold.it/1850x1500" />
            </div>
            <div key="05" className="gallery-cell">
                <img src="http://placehold.it/650x1000" />
            </div>
            <div key="06" className="gallery-cell">
                <img src="http://placehold.it/350x2500" />
            </div>
        </div>
    )}
});
ReactDOM.render(
    <Gallery />, 
    document.getElementById('main')
);

SCSS：

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #833;
}
div#main {
    margin: 0 auto;
    width: 750px;
    height: auto !important;
    height: 100%;
    min-height: 100%;
}
.gallery {
    background: #EEE;
    overflow: hidden;
}
.gallery-cell {
    display: inline-block;
    height: 100vh;
    img {
        border-left: 2px solid #444;
        height: 100%;
    }
}

Answer 1

我不确定它是否能解决你的答案，但你可以尝试类似于我的另一个答案，使用MetricsGraphics.js和ReactJS，使用refs。但老实说，我担心它与您正在使用的Flickity库有关，而不是与React有关。

Answer 2

在我看来这是一个竞争条件。我知道这不是最漂亮的解决方案，但试试这个：

  componentDidMount: function() {
    var self = this;
    setTimeout(function(){
      self.flkty = new Flickity('.gallery', {
        freeScroll: true,
        wrapAround: true,
        prevNextButtons: false,
        pageDots: false,
        freeScrollFriction: 0.00,
        lazyLoad: true
      });
      self.flkty.velocity = 1;
      self.flkty.isFreeScrolling = true;
      self.flkty.startAnimation();
     }, 500);
},

InReacts组件DidMount文档：

如果您想与其他JavaScript框架集成，请设置计时器使用setTimeout或setInterval，或者发送AJAX请求，执行此方法中的操作。

既然你知道这是一个比赛条件，看看是否有一个事件你可以等待启动旋转木马，这样你就不需要依赖setTimeout了。

Answer 3

根据文档，"未加载的图像没有大小，这可能会偏离单元格位置。要解决此问题，imagesLoaded选项会在加载图像后重新定位单元格。"

然而，"作为一个独立的软件包，Flickity不包括imagesLoaded、asNavFor和bgLazyLoad代码。您可以单独需要这些软件包。"

所以，为了解决这个问题，我不得不做以下事情：

步骤1:npm安装flickity镜像加载--保存

第2步：需要（"加载了许可证图像"）；

步骤3:将imagesLoaded标志添加到Flickity构造函数。

componentDidMount: function() {
    this.flkty = new Flickity('.gallery', {
        freeScroll: true,
        wrapAround: true,
        prevNextButtons: false,
        pageDots: false,
        freeScrollFriction: 0.00,
        lazyLoad: 2,
        imagesLoaded: true
    });