alter，modal弹框的使用心得

    需求中，用到弹框来提醒用户。在开源的组件中，选择了modal和alter组件完成。

    alter是在modal的基础上封装而成的，相对于modal，少了些暴露的属性，修饰footer节点的样式的方式不同和自带的动画效果。

    更详细的了解modal和alter，请参考链接：https://mobile.ant.design/components/modal/

    modal会根据不同平台显示各自平台的样式。不用自定义class，运行工程，查看弹框节点处的元素的class即可区分iOS，和android平台。区分出不同平台，就可修改不同平台上的样式。在实践中不同平台的modal和alter的区分class是一样的，iOS平台上的class为：.am-modal.am-modal-transparent，android平台上的class为：.am-modal.am-modal-transparent.am-modal-android。

     项目中的弹框，不止一个，样式要求统一，可以复用自定义弹框的css，最好再将css的引用放在全局的样式文件中。弹框有的有title，message，一个按钮或两个按钮，有的没有title，只有message和按钮，且message的高度都是根据内容自适应的，且没有title时，title的高度为0。

    在开发时，iOS上显示的没有title和只有一行message的弹框，message的高度小于按钮的高度，不协调。若此时用的alter实现的弹框，因没有暴露class属性，不能自定义class，来单独修改message的高度。若要单独修改message的高度，不影响其他有title，有message的弹框的样式，有两种方法：

    方法一：将alter实现的弹框，换成modal实现。modal有暴露的class属性,利用自定义的class，实现单独修改message的高度。

                  modal实现：<modal calssName='extra' ></extra>

                 css实现：&.extra {修改message的高度}

    方法二：将message的内容，前后加换行，扩大message的高度。代码实现如下：

                message的内容为：<span><br />原message的内容 <br /><br /> </span>。（注意，后一个换行符，要用两个<br />，用一个的话，会被忽略掉，没有换行效果）

     开发中，使用modal实现的弹框，设置max-height的高度，来限制弹框的最大高度，用overflow-y: scroll超过最大高度后，设置滑动。通过modal的visible属性值，控制弹框的出现和消失。添加在render方法体内，例如：render（）｛ return ｛  <modal visible＝{isShow}></modal> ｝}。假设此界面，可以触发多次弹框（message不同），且每一个弹框的message内容很长，达到了最大高度，可以滑动展示。此时的modal实现的弹框，是复用的。如果将弹框中的message滑动到底部，消失。再次出现的弹框，message依然是滑动到底部的。不符合需求。解决办法是不复用，每次弹框出现，都是新的一个。代码为：

      render（）｛ return ｛  isShow ? <modal visible＝{isShow}></modal> : null ｝}