【Taro】View标签的bug

本人在用taro做日常开发的时候，要求实现一个状态控制按钮显隐的功能，本身以为没什么难度，就日常搬砖而已，没想到遇到这么个问题。

话不多说，直接上代码：

//页面
<View className="btnlist">
    {
        detail.cancelBtn && <View  className="btn">取消订单<View>
    }
    {
        detail.changeTripBtn && <View  className="btn">行程变更<View>
    }
    {
        detail.payBtn && <View className="btn">支付<View>
    }
<View>

//css
.btnlist{
    width:100%;
    height:130px;
    display:flex;
}
.btn{
    flex:1;
    background-color: #f1f4ff;
    color: #4485fe;
}

平平淡淡的功能，当三个按钮都显示时是这样

支付完重新请求详情接口，payBtn状态更新为false ,页面只剩2个按钮，我直接震惊！！！

 WTF？？？从业这么久，这么简单的代码出这么个问题没遇见过！！

但是作为一个成熟的码农，我们出现bug还是要解决bug的，从视觉上分析了一下，应该是：支付按钮消失，导致另外两个按钮宽度增加，在增加的过程中，丢掉了某些“画面”。

于是我写了个事件来控制支付按钮的显隐，在切换过程中，平均两次出现一次“画面丢失”的问题，通过检查元素查看，发现并没有产生什么额外的干扰导致这种问题，这就有点意思了，按理说元素宽度发生变化，浏览器渲染理应重绘，但是重绘为什么会保留上一次的效果，像卡了一帧在这里一样。

考虑良久，既然是元素宽度发生变化，能不能不影响到文字的那部分，而只是让中间的文字‘挪’一下位置？

于是我将文字用<Text>标签包裹，然后给它加上弹性盒居中，问题解决。。。

//页面
<View className="btnlist">
    {
        detail.cancelBtn && <View className="btn"><Text>取消订单</Text><View>
    }
    {
        detail.changeTripBtn && <View className="btn"><Text>行程变更</Text><View>
    }
    {
        detail.payBtn && <View className="btn"><Text>支付</Text><View>
    }
<View>

//css
.btnlist{
    width:100%;
    height:130px;
    display:flex;
}
.btn{
    flex:1;
    background-color: #f1f4ff;
    color: #4485fe;
    display:flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

但是这个问题的起因是什么我只能猜测是微信小程序的内核在处理flex:1的元素宽度变化的时候会‘忘记’清除上一帧的内容。