Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dos1in wants to merge 5 commits into
base: master
Choose a base branch
from
+4 −2
Open

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

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0c51a4d
pref(rn): 优化全尺寸 linear-gradient 背景渲染
dos1in Jun 11, 2026
f8115ae
Merge branch 'master' into pref/rn-gradient-image
hiyuki Jul 1, 2026
211859c
Merge branch 'master' into pref/rn-gradient-image
dos1in Jul 1, 2026
6f934a2
Merge branch 'master' into pref/rn-gradient-image
dos1in Jul 6, 2026
d50459f
Merge branch 'master' into pref/rn-gradient-image
dos1in Jul 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ const isNeedLayout = (preImageInfo: PreImageInfo): boolean => {
isPercent(bp[1]) ||
isPercent(bp[3]) ||
isDiagonalAngle(linearInfo) ||
(type === 'linear' && (isPercent(height) || isPercent(width)))
(type === 'linear' && (isPercent(height) || isPercent(width)) && !(width === '100%' && height === '100%'))
}

const checkNeedLayout = (preImageInfo: PreImageInfo) => {
Expand Down Expand Up @@ -315,7 +315,9 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
} else { // 数值类型 ImageStyle
// 数值类型设置为 stretch
imageProps.resizeMode = 'stretch'
if (type === 'linear' && (!layoutWidth || !layoutHeight) && (isPercent(width) || isPercent(height))) {
if (type === 'linear' && width === '100%' && height === '100%' && (!layoutWidth || !layoutHeight)) {

@hiyuki hiyuki Jul 7, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@dos1in dos1in Jul 7, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@hiyuki hiyuki Jul 8, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@hiyuki hiyuki Jul 8, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@hiyuki hiyuki Jul 8, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@dos1in dos1in Jul 8, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

dimensions = StyleSheet.absoluteFillObject as unknown as { width: NumberVal, height: NumberVal }
} else if (type === 'linear' && (!layoutWidth || !layoutHeight) && (isPercent(width) || isPercent(height))) {
// ios 上 linear 组件只要重新触发渲染，在渲染过程中外层容器 width 或者 height 被设置为 0，通过设置 % 的方式会渲染不出来，即使后面再更新为正常宽高也渲染不出来
Comment thread
dos1in marked this conversation as resolved.
// 所以 hack 手动先将 linear 宽高也设置为 0，后面再更新为正确的数值或 %。
dimensions = {
Expand Down
Loading