File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 22name : mpx2rn
33description : Mpx 跨端输出 RN(简称 Mpx2RN 或 Mpx2DRN)的开发适配指南,覆盖模板、脚本、样式、JSON 配置四大维度。当用户进行 Mpx2RN 相关任务时强制调用,包括但不限于:技术方案设计、页面 / 组件的开发迭代、旧项目跨端适配改造、编译和运行时报错排查、Code Review 等。当用户问题不涉及 Mpx2RN 时不应调用,如 Mpx 小程序开发问题,RN 原生开发问题、Mpx2Web 相关问题等。
44metadata :
5- version : " 2.12.6 "
5+ version : " 2.12.7 "
66 author : donghongping
77---
88
Original file line number Diff line number Diff line change 1313- [ 样式单位使用建议] ( #样式单位使用建议 )
1414 - [ 优先使用 px 和 rpx 单位] ( #优先使用-px-和-rpx-单位 )
1515 - [ 使用百分比] ( #使用百分比 )
16+ - [ 单边边框] ( #单边边框 )
1617 - [ 1 像素边框(极细线)] ( #1-像素边框极细线 )
1718 - [ 避免使用不兼容的单位 (rem/em)] ( #避免使用不兼容的单位-remem )
1819 - [ 谨慎使用 font-weight 数值] ( #谨慎使用-font-weight-数值 )
@@ -624,6 +625,41 @@ export default {
6246253. ** 谨慎使用 calc() 中的百分比** :该写法需要 `parent-width ` / `parent-height ` 辅助计算,通常还要查询父级布局并延迟展示,存在性能与体验开销;优先使用原生百分比、Flex、rpx / vw / vh 或固定尺寸替代
6256264. ** 使用 vh/vw** :对于视口相关的尺寸,vh/vw 是更好的选择
626627
628+ ### 单边边框
629+
630+ 声明单边边框时,优先使用 `border-top ` / `border-right ` / `border-bottom ` / `border-left ` 简写。单边简写会同时表达目标方向的宽度、样式和颜色,意图更清晰,也可以避免 RN 仅支持统一 `border-style ` 带来的方向耦合。
631+
632+ ** ✅ 推荐:使用单边简写**
633+
634+ ```css
635+ .divider {
636+ border-bottom : 1 rpx solid #e5e5e5 ;
637+ }
638+ ```
639+
640+ 如果因动态样式拆分等原因,确实需要组合使用统一的 ` border-style ` 与单边 ` border-*-width ` ,须将其余三个不需要边框的方向宽度显式归零,避免统一样式与同规则或合并样式中的其他方向宽度共同产生意外边框。
641+
642+ ** ❌ 避免:只设置目标方向宽度**
643+
644+ ``` css
645+ .divider {
646+ border-style : solid ;
647+ border-color : #e5e5e5 ;
648+ border-bottom-width : 1 rpx;
649+ }
650+ ```
651+
652+ ** ✅ 拆写时显式清零其他方向**
653+
654+ ``` css
655+ .divider {
656+ border-style : solid ;
657+ border-color : #e5e5e5 ;
658+ border-width : 0 ;
659+ border-bottom-width : 1 rpx;
660+ }
661+ ```
662+
627663### 1 像素边框(极细线)
628664
629665在移动端开发中,常需要实现物理像素为 1px 的极细边框。
Original file line number Diff line number Diff line change @@ -312,6 +312,7 @@ RN 仅原生支持部分 CSS 简写属性,Mpx 分别在**编译时**和**运
312312- ** 边框简写** :` border ` 、` border-top ` 、` border-right ` 、` border-bottom ` 、` border-left `
313313 - 如 ` border: 1px solid red ` → ` borderWidth: 1, borderStyle: 'solid', borderColor: 'red' `
314314 - 单边 ` border-* ` 中的 ` <border-style> ` 槽位会展开为 ` borderStyle ` (RN 不支持单边 ` border-*-style ` ,统一作用于四边)
315+ - 声明单边边框时优先使用单边 ` border-* ` 简写;确需组合使用 ` border-style ` 与 ` border-*-width ` 时,将其余三个不设置边框的方向宽度显式归零
315316 - ` border: none ` / ` border: 1px none red ` 会先保留 ` borderStyle: 'none' ` ,最终在运行时统一转换为 ` borderWidth: 0 `
316317- ** 外轮廓简写** :` outline `
317318 - 按值类型无序展开为 ` outline-width ` / ` outline-style ` / ` outline-color ` ,合法值不强制书写顺序
@@ -535,6 +536,7 @@ Mpx 在 RN 平台支持 CSS 背景图及渐变背景,框架会自动处理样
535536| 属性 | 值类型 | 说明 | 示例 |
536537| --- | --- | --- | --- |
537538| ` border ` | ` width \|\| style \|\| color ` | 边框简写 | ` border: 1px solid #e5e5e5 ` |
539+ | ` border-* ` | ` width \|\| style \|\| color ` | 单边边框简写,优先用于声明单边边框 | ` border-bottom: 1px solid #e5e5e5 ` |
538540| ` border-width ` | ` length ` | 边框宽度(支持多值) | ` border-width: 1px ` ;` border-width: 1px 2px ` |
539541| ` border-color ` | ` color ` | 边框颜色(支持多值) | ` border-color: #ccc ` ;` border-color: red blue ` |
540542| ` border-style ` | ` solid ` \| ` dotted ` \| ` dashed ` \| ` none ` | 边框样式(不支持单边设置);` none ` 会在运行时转换为 ` border-width: 0 ` | ` border-style: dashed ` ;` border-style: none ` |
Original file line number Diff line number Diff line change @@ -150,8 +150,7 @@ Mpx 跨端输出 RN 时,支持以下模板指令。
150150** 注意事项**
151151
152152- ` wx:key ` 需与 ` wx:for ` 配合使用,属性值不能使用 Mustache 数据绑定。传入普通字符串(如 ` wx:key="id" ` )时,会读取列表项的同名属性;传入保留关键字 ` *this ` 且列表项为基本类型时,会使用列表项本身;传入 ` index ` 或 ` _ ` 时,会使用列表索引。如果解析出的 key 是对象类型,RN 平台会退化为使用列表索引。
153- - RN 平台会将 ` wx:key ` 转换为 React 的 ` key ` 。同一父节点下的列表项 key 必须唯一且稳定,重复或随渲染变化的 key 可能导致组件状态复用错误或渲染异常。
154- - 对于可能插入、删除或重排的动态列表,应优先使用稳定的业务唯一标识,避免使用 ` index ` 、` _ ` ,以及对象列表中的 ` *this ` 或对象类型属性值;仅在列表顺序固定时使用索引作为 key。使用 ` *this ` 处理基本类型列表时,需确保列表项本身不存在重复值。
153+ - 通过 ` wx:key ` 规则获取到的 key 值必须为数值或字符串字面量,同一父节点下的列表项 key 值必须唯一,不合法的 key 值会直接导致运行时报错,随渲染变化的不稳定 key 值可能导致组件状态复用错误或渲染异常。
155154- RN 平台下,同标签的 ` wx:if ` / ` wx:elif ` / ` wx:else ` 分支可能被 React 复用;当分支使用的按需样式能力不一致时,需通过预声明 ` enable-* ` 或添加独立 ` key ` 保证生命周期稳定。详见[ 样式开发最佳实践 · 按需样式能力预声明] ( ./rn-style-practice.md#按需样式能力预声明 ) 。
156155
157156---
You can’t perform that action at this time.
0 commit comments