pref(rn): 优化全尺寸 linear-gradient 背景渲染时机

[dos1in]

默认全尺寸的渐变色 linear-gradient 无差别等待 onLayout 导致首帧显示变慢，做了以下优化：

• 对归一化为 100% 100% 的 linear-gradient 背景跳过 layout 等待
• layout 尺寸未就绪时使用 StyleSheet.absoluteFillObject 直接铺满全尺寸渐变
• 保留非全尺寸 background-size、background-position 和对角渐变的原有 layout 路径

before.mp4

after.mp4

[dos1in]

valid-show-hide.mp4

验证看起没问题，验证逻辑如下:

<template>
  <view class="page">
    <view class="stage">
      <view
        key="bg-wx-show-linear-1"
        enable-background="{{ true }}"
        wx:show="{{ showGradient }}"
        class="gradient"
      >
        <text class="text">wx:show false -> true</text>
      </view>
    </view>

    <view class="button" bindtap="replay">
      <text class="button-text">重放</text>
    </view>
  </view>
</template>

<script>
  import { createPage } from '@mpxjs/core'

  createPage({
    data: {
      showGradient: false,
    },

    onReady() {
      this.replay()
    },

    methods: {
      replay() {
        this.setData({ showGradient: false })

        setTimeout(() => {
          this.setData({ showGradient: true })
        }, 800)
      },
    },
  })
</script>

<style lang="stylus" scoped>
  .page
    padding 32rpx
    background-color #f5f6f8
    min-height 100vh

  .stage
    position relative
    border-radius 18rpx
    overflow hidden
    background-color #e9edf2

  .gradient
    height 220rpx
    display flex
    align-items center
    justify-content center
    background-image linear-gradient(90deg, #00e1bf 0%, #00bed3 100%)
    background-repeat no-repeat
    background-size 100% 100%

  .text
    color #fff
    font-size 30rpx
    font-weight 600

  .button
    margin-top 24rpx
    height 72rpx
    display flex
    align-items center
    justify-content center
    background-color #14d0b4

  .button-text
    color #fff
    font-size 26rpx
</style>

[hiyuki]

&& (!layoutWidth || !layoutHeight) 最后这个条件不需要了吧

[dos1in]

需要的，没拿到容器宽高时可以直接让 100% 100% 的渐变铺满父容器；但拿到宽高后要用它重新计算位置或角度，不能一律走铺满逻辑。

[hiyuki]

那不是还会闪么？如果重新计算后渲染效果不一致的话

[hiyuki]

如果依赖layout计算角度或者位置的话本身isNeedLayout会返回为true，背景图只有在layout后才会展示，你当前这个改动生效的核心条件就是扩宽了isNeedLayout的判定条件，让没有角度且高宽为100%的情况isNeedLayout返回false，让首次渲染不等待layout，如果命中其他条件让isNeedLayout返回false的话你当前这个改动逻辑是不会被命中的

[hiyuki]

而且对于size来说用absolute铺满还是设置高宽100%结果是一样的吧

[dos1in]

我理解是会闪，但保留它主要是为了把这个“铺满父容器”的特殊处理只用在首次还没拿到 layout 的时候；如果已经拿到 layout，就继续按原来的 width: 100% / height: 100% 走，避免额外带上 top/right/bottom/left: 0 改变其它位置相关逻辑。