美文网首页
RN笔记 - 过渡动画卡顿的解决方案

RN笔记 - 过渡动画卡顿的解决方案

作者: 金丝楠 | 来源:发表于2019-12-12 13:27 被阅读0次

    场景:Navigator过渡动画、Modal弹窗show/hide动画,使用InteractionManager.runAfterInteractions这个解决方案

    Interactionmanager可以将一些耗时较长的工作安排到所有互动或动画完成之后再进行。这样可以保证JavaScript动画的流畅运行,应用这样可以安排一个任务在交互和动画完成之后执行。

    InteractionManager.runAfterInteractions(() => {
        // 耗时较长的同步的任务
        this.onReqMakeDeal();
    });
    

    Modal弹窗为例,具体应用代码如下:

    import Modal from "rn-global-modal";
    
    // <EntrustAlert/> 为自定义的业务组件代码
    Modal.show(
          <EntrustAlert
            dataSource={modalData}
            callbackIndex={index => {
              Modal.hide();
              if (index === 1) {
                // 解决过渡动画卡顿的问题
                InteractionManager.runAfterInteractions(() => {
                  HandlerOnceTap(() => this.onReqMakeDeal());
                });
              }
            }}
          />,
          {
            animationType: "fade",
            maskClosable: true,
            onMaskClose: () => {}
          }
        );
    

    参考地址:https://blog.csdn.net/u012982629/article/details/82024476

    相关文章

      网友评论

          本文标题:RN笔记 - 过渡动画卡顿的解决方案

          本文链接:https://www.haomeiwen.com/subject/ajxtnctx.html