@beppla/tapas-ui 1.4.17 → 1.4.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/commonjs/Drawer/Drawer.js +4 -0
- package/commonjs/Drawer/Drawer.js.map +1 -1
- package/commonjs/Drawer/SCROLLVIEW_FIX.md +127 -0
- package/module/Drawer/Drawer.js +4 -0
- package/module/Drawer/Drawer.js.map +1 -1
- package/module/Drawer/SCROLLVIEW_FIX.md +127 -0
- package/package.json +1 -1
- package/typescript/Drawer/Drawer.d.ts.map +1 -1
|
@@ -49,6 +49,9 @@ const useStyles = (0, _themed.makeStyles)(theme => ({
|
|
|
49
49
|
fontFamily: theme.fonts.fontFamily,
|
|
50
50
|
paddingBottom: theme.spacing.tpMd
|
|
51
51
|
},
|
|
52
|
+
containerStyle: {
|
|
53
|
+
flexGrow: 1
|
|
54
|
+
},
|
|
52
55
|
title: {
|
|
53
56
|
fontFamily: theme.fonts.fontFamily,
|
|
54
57
|
fontSize: theme.fonts.h4,
|
|
@@ -169,6 +172,7 @@ const Drawer = ({
|
|
|
169
172
|
})
|
|
170
173
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
|
|
171
174
|
style: [styles.middleSection, middleSectionStyle],
|
|
175
|
+
contentContainerStyle: styles.containerStyle,
|
|
172
176
|
children: [component, children]
|
|
173
177
|
}), showFooter && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
174
178
|
style: [styles.footer],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_themed","require","_reactNative","_reactNativeSafeAreaContext","_react","_interopRequireDefault","_Button","_TapasIcon","_Status","_jsxRuntime","e","__esModule","default","useStyles","makeStyles","theme","overlay","width","Platform","OS","height","position","top","right","justifyContent","alignItems","paddingVertical","paddingHorizontal","borderTopRightRadius","borderBottomRightRadius","flx","display","flexDirection","header","spacing","tpRg","middleSection","flex","fontFamily","fonts","paddingBottom","tpMd","title","fontSize","h4","letterSpacing","letterSpacingS","color","colors","primary","fontWeight","weightM","clear","sizeM","grey3","footer","sizeS","borderTopColor","borderTopWidth","leftButton","leftButtonText","rightButton","marginLeft","tpXs","icon","rightButtonText","Drawer","visible","onClear","clearText","onClose","titleIcon","titleIconOnPress","titleStatus","statusType","overlayStyle","children","showHeader","showFooter","middleSectionStyle","leftButtonTextStyle","rightButtonStyle","leftButtonOnPress","rightButtonOnPress","component","footerComponent","headerComponent","clearDisable","testID","props","styles","getSaveArea","insets","useSafeAreaInsets","paddingTop","jsxs","Overlay","isVisible","onBackdropPress","jsx","View","style","Fragment","gap","TouchableOpacity","onPress","name","size","Text","mode","type","tag","disabled","ScrollView","_default","exports","withTheme"],"sourceRoot":"../../../components","sources":["Drawer/Drawer.tsx"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AASA,IAAAE,2BAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,UAAA,GAAAF,sBAAA,CAAAJ,OAAA;AACA,IAAAO,OAAA,GAAAH,sBAAA,CAAAJ,OAAA;AAAuD,IAAAQ,WAAA,GAAAR,OAAA;AAAA,SAAAI,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AA8BvD,MAAMG,SAAS,GAAG,IAAAC,kBAAU,EAAEC,KAAK,KAAM;EACvCC,OAAO,EAAE;IACPC,KAAK,EAAEC,qBAAQ,CAACC,EAAE,KAAK,KAAK,GAAG,KAAK,GAAG,MAAM;IAC7CC,MAAM,EAAE,MAAM;IACdC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,KAAK,EAAE,CAAC;IACRC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,UAAU;IACtBC,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE,CAAC;IACpBC,oBAAoB,EAAE,CAAC;IACvBC,uBAAuB,EAAE;EAC3B,CAAC;EACDC,GAAG,EAAE;IACHC,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,KAAK;IACpBP,UAAU,EAAE,QAAQ;IACpBD,cAAc,EAAE;EAClB,CAAC;EACDS,MAAM,EAAE;IACNF,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,KAAK;IACpBR,cAAc,EAAE,eAAe;IAC/BJ,MAAM,EAAE,EAAE;IACVH,KAAK,EAAE,MAAM;IACbQ,UAAU,EAAE,QAAQ;IACpBE,iBAAiB,EAAEZ,KAAK,CAACmB,OAAO,CAACC;EACnC,CAAC;EACDC,aAAa,EAAE;IACbC,IAAI,EAAE,CAAC;IACPpB,KAAK,EAAE,MAAM;IACbU,iBAAiB,EAAEZ,KAAK,CAACmB,OAAO,CAACC,IAAI;IACrCG,UAAU,EAAEvB,KAAK,CAACwB,KAAK,CAACD,UAAU;IAClCE,aAAa,EAAEzB,KAAK,CAACmB,OAAO,CAACO;EAC/B,CAAC;EACDC,KAAK,EAAE;
|
|
1
|
+
{"version":3,"names":["_themed","require","_reactNative","_reactNativeSafeAreaContext","_react","_interopRequireDefault","_Button","_TapasIcon","_Status","_jsxRuntime","e","__esModule","default","useStyles","makeStyles","theme","overlay","width","Platform","OS","height","position","top","right","justifyContent","alignItems","paddingVertical","paddingHorizontal","borderTopRightRadius","borderBottomRightRadius","flx","display","flexDirection","header","spacing","tpRg","middleSection","flex","fontFamily","fonts","paddingBottom","tpMd","containerStyle","flexGrow","title","fontSize","h4","letterSpacing","letterSpacingS","color","colors","primary","fontWeight","weightM","clear","sizeM","grey3","footer","sizeS","borderTopColor","borderTopWidth","leftButton","leftButtonText","rightButton","marginLeft","tpXs","icon","rightButtonText","Drawer","visible","onClear","clearText","onClose","titleIcon","titleIconOnPress","titleStatus","statusType","overlayStyle","children","showHeader","showFooter","middleSectionStyle","leftButtonTextStyle","rightButtonStyle","leftButtonOnPress","rightButtonOnPress","component","footerComponent","headerComponent","clearDisable","testID","props","styles","getSaveArea","insets","useSafeAreaInsets","paddingTop","jsxs","Overlay","isVisible","onBackdropPress","jsx","View","style","Fragment","gap","TouchableOpacity","onPress","name","size","Text","mode","type","tag","disabled","ScrollView","contentContainerStyle","_default","exports","withTheme"],"sourceRoot":"../../../components","sources":["Drawer/Drawer.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
# Drawer ScrollView 布局修复
|
|
2
|
+
|
|
3
|
+
## 问题描述
|
|
4
|
+
|
|
5
|
+
之前 Drawer 组件的 ScrollView 在某些情况下,内容高度不足时无法填充整个可用空间,导致布局不理想。
|
|
6
|
+
|
|
7
|
+
## 解决方案
|
|
8
|
+
|
|
9
|
+
### 修改内容
|
|
10
|
+
|
|
11
|
+
为 ScrollView 添加 `contentContainerStyle`,使用 `flexGrow: 1` 确保内容容器能够填充整个 ScrollView。
|
|
12
|
+
|
|
13
|
+
```typescript
|
|
14
|
+
<ScrollView
|
|
15
|
+
style={[styles.middleSection, middleSectionStyle]}
|
|
16
|
+
contentContainerStyle={styles.containerStyle} // ✨ 新增
|
|
17
|
+
>
|
|
18
|
+
{component}
|
|
19
|
+
{children}
|
|
20
|
+
</ScrollView>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### 样式定义
|
|
24
|
+
|
|
25
|
+
```typescript
|
|
26
|
+
containerStyle: {
|
|
27
|
+
flexGrow: 1, // 让内容容器至少填充整个 ScrollView
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## 技术说明
|
|
32
|
+
|
|
33
|
+
### `flex: 1` vs `flexGrow: 1`
|
|
34
|
+
|
|
35
|
+
在 ScrollView 的 `contentContainerStyle` 中:
|
|
36
|
+
|
|
37
|
+
- ❌ **不要使用 `flex: 1`**
|
|
38
|
+
- `flex: 1` 是 `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0` 的简写
|
|
39
|
+
- 会让内容容器强制占据固定高度,可能破坏滚动行为
|
|
40
|
+
- 在内容超出时会导致布局问题
|
|
41
|
+
|
|
42
|
+
- ✅ **使用 `flexGrow: 1`**
|
|
43
|
+
- 允许内容容器增长以填充可用空间
|
|
44
|
+
- 当内容少时,容器会扩展填充 ScrollView
|
|
45
|
+
- 当内容多时,容器自然增长,保持滚动功能正常
|
|
46
|
+
- 不会影响 `flex-shrink` 和 `flex-basis` 的默认行为
|
|
47
|
+
|
|
48
|
+
### ScrollView 的两个样式属性
|
|
49
|
+
|
|
50
|
+
```typescript
|
|
51
|
+
// 外层容器样式(ScrollView 本身)
|
|
52
|
+
style={{
|
|
53
|
+
flex: 1, // ✅ 正确:让 ScrollView 占满可用空间
|
|
54
|
+
paddingHorizontal: 16,
|
|
55
|
+
}}
|
|
56
|
+
|
|
57
|
+
// 内层内容容器样式(包裹 children)
|
|
58
|
+
contentContainerStyle={{
|
|
59
|
+
flexGrow: 1, // ✅ 正确:让内容至少填充 ScrollView
|
|
60
|
+
paddingBottom: 20, // 内容的 padding
|
|
61
|
+
}}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## 使用场景
|
|
65
|
+
|
|
66
|
+
这个修复特别适用于:
|
|
67
|
+
|
|
68
|
+
1. **内容较少时**: 确保内容垂直居中或填充整个抽屉
|
|
69
|
+
2. **动态内容**: 内容高度可能变化的场景
|
|
70
|
+
3. **表单布局**: 需要底部按钮始终在底部的情况
|
|
71
|
+
4. **空状态**: 显示空状态提示时保持良好布局
|
|
72
|
+
|
|
73
|
+
## 示例
|
|
74
|
+
|
|
75
|
+
### 修复前
|
|
76
|
+
|
|
77
|
+
```typescript
|
|
78
|
+
// 内容少时,ScrollView 内容不填充,底部有空白
|
|
79
|
+
<Drawer visible={true}>
|
|
80
|
+
<Text>少量内容</Text>
|
|
81
|
+
</Drawer>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### 修复后
|
|
85
|
+
|
|
86
|
+
```typescript
|
|
87
|
+
// 内容少时,ScrollView 内容填充整个可用空间
|
|
88
|
+
<Drawer visible={true}>
|
|
89
|
+
<Text>少量内容</Text>
|
|
90
|
+
{/* 内容会填充整个抽屉高度 */}
|
|
91
|
+
</Drawer>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## React Native ScrollView 官方文档
|
|
95
|
+
|
|
96
|
+
根据 React Native 官方文档:
|
|
97
|
+
|
|
98
|
+
> `contentContainerStyle`: These styles will be applied to the scroll view content container which wraps all of the child views.
|
|
99
|
+
|
|
100
|
+
推荐使用:
|
|
101
|
+
- `flexGrow: 1` - 让内容至少填充容器
|
|
102
|
+
- `paddingBottom` - 内容底部间距
|
|
103
|
+
- `alignItems` - 内容对齐方式
|
|
104
|
+
|
|
105
|
+
## 注意事项
|
|
106
|
+
|
|
107
|
+
1. **不要在 contentContainerStyle 中使用 `flex: 1`**
|
|
108
|
+
- 会导致滚动行为异常
|
|
109
|
+
- 在 Web 上可能引起布局问题
|
|
110
|
+
|
|
111
|
+
2. **保持 style 中的 `flex: 1`**
|
|
112
|
+
- ScrollView 本身需要 `flex: 1` 来占据可用空间
|
|
113
|
+
- 这是在 `middleSection` 样式中定义的
|
|
114
|
+
|
|
115
|
+
3. **Web 平台兼容性**
|
|
116
|
+
- 使用 `flexGrow: 1` 在 Web 和原生平台都能正常工作
|
|
117
|
+
- 确保跨平台一致性
|
|
118
|
+
|
|
119
|
+
## 相关资源
|
|
120
|
+
|
|
121
|
+
- [React Native ScrollView 文档](https://reactnative.dev/docs/scrollview)
|
|
122
|
+
- [Flexbox 布局指南](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|
|
123
|
+
- [React Native 布局最佳实践](https://reactnative.dev/docs/flexbox)
|
|
124
|
+
|
|
125
|
+
## 版本历史
|
|
126
|
+
|
|
127
|
+
- **v1.4.18**: 修复 ScrollView 内容容器布局,使用 `flexGrow: 1`
|
package/module/Drawer/Drawer.js
CHANGED
|
@@ -44,6 +44,9 @@ const useStyles = makeStyles(theme => ({
|
|
|
44
44
|
fontFamily: theme.fonts.fontFamily,
|
|
45
45
|
paddingBottom: theme.spacing.tpMd
|
|
46
46
|
},
|
|
47
|
+
containerStyle: {
|
|
48
|
+
flexGrow: 1
|
|
49
|
+
},
|
|
47
50
|
title: {
|
|
48
51
|
fontFamily: theme.fonts.fontFamily,
|
|
49
52
|
fontSize: theme.fonts.h4,
|
|
@@ -164,6 +167,7 @@ const Drawer = ({
|
|
|
164
167
|
})
|
|
165
168
|
}), /*#__PURE__*/_jsxs(ScrollView, {
|
|
166
169
|
style: [styles.middleSection, middleSectionStyle],
|
|
170
|
+
contentContainerStyle: styles.containerStyle,
|
|
167
171
|
children: [component, children]
|
|
168
172
|
}), showFooter && /*#__PURE__*/_jsxs(View, {
|
|
169
173
|
style: [styles.footer],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Overlay","withTheme","makeStyles","Text","View","ScrollView","TouchableOpacity","Platform","useSafeAreaInsets","React","Button","Icon","Status","Fragment","_Fragment","jsx","_jsx","jsxs","_jsxs","useStyles","theme","overlay","width","OS","height","position","top","right","justifyContent","alignItems","paddingVertical","paddingHorizontal","borderTopRightRadius","borderBottomRightRadius","flx","display","flexDirection","header","spacing","tpRg","middleSection","flex","fontFamily","fonts","paddingBottom","tpMd","title","fontSize","h4","letterSpacing","letterSpacingS","color","colors","primary","fontWeight","weightM","clear","sizeM","grey3","footer","sizeS","borderTopColor","borderTopWidth","leftButton","leftButtonText","rightButton","marginLeft","tpXs","icon","rightButtonText","Drawer","visible","onClear","clearText","onClose","titleIcon","titleIconOnPress","titleStatus","statusType","overlayStyle","children","showHeader","showFooter","middleSectionStyle","leftButtonTextStyle","rightButtonStyle","leftButtonOnPress","rightButtonOnPress","component","footerComponent","headerComponent","clearDisable","testID","props","styles","getSaveArea","insets","paddingTop","isVisible","onBackdropPress","style","gap","onPress","name","size","mode","type","tag","disabled"],"sourceRoot":"../../../components","sources":["Drawer/Drawer.tsx"],"mappings":";;AAAA,SAAQA,OAAO,EAAEC,SAAS,EAAEC,UAAU,QAAO,eAAe;AAC5D,SACEC,IAAI,EACJC,IAAI,EACJC,UAAU,EAGVC,gBAAgB,EAChBC,QAAQ,QACH,cAAc;AACrB,SAAQC,iBAAiB,QAAO,gCAAgC;AAChE,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,kBAAkB;AACrC,OAAOC,IAAI,MAAM,oBAAoB;AACrC,OAAOC,MAAM,MAAuB,kBAAkB;AAAC,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AA8BvD,MAAMC,SAAS,GAAGjB,UAAU,CAAEkB,KAAK,KAAM;EACvCC,OAAO,EAAE;IACPC,KAAK,EAAEf,QAAQ,CAACgB,EAAE,KAAK,KAAK,GAAG,KAAK,GAAG,MAAM;IAC7CC,MAAM,EAAE,MAAM;IACdC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,KAAK,EAAE,CAAC;IACRC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,UAAU;IACtBC,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE,CAAC;IACpBC,oBAAoB,EAAE,CAAC;IACvBC,uBAAuB,EAAE;EAC3B,CAAC;EACDC,GAAG,EAAE;IACHC,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,KAAK;IACpBP,UAAU,EAAE,QAAQ;IACpBD,cAAc,EAAE;EAClB,CAAC;EACDS,MAAM,EAAE;IACNF,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,KAAK;IACpBR,cAAc,EAAE,eAAe;IAC/BJ,MAAM,EAAE,EAAE;IACVF,KAAK,EAAE,MAAM;IACbO,UAAU,EAAE,QAAQ;IACpBE,iBAAiB,EAAEX,KAAK,CAACkB,OAAO,CAACC;EACnC,CAAC;EACDC,aAAa,EAAE;IACbC,IAAI,EAAE,CAAC;IACPnB,KAAK,EAAE,MAAM;IACbS,iBAAiB,EAAEX,KAAK,CAACkB,OAAO,CAACC,IAAI;IACrCG,UAAU,EAAEtB,KAAK,CAACuB,KAAK,CAACD,UAAU;IAClCE,aAAa,EAAExB,KAAK,CAACkB,OAAO,CAACO;EAC/B,CAAC;EACDC,KAAK,EAAE;
|
|
1
|
+
{"version":3,"names":["Overlay","withTheme","makeStyles","Text","View","ScrollView","TouchableOpacity","Platform","useSafeAreaInsets","React","Button","Icon","Status","Fragment","_Fragment","jsx","_jsx","jsxs","_jsxs","useStyles","theme","overlay","width","OS","height","position","top","right","justifyContent","alignItems","paddingVertical","paddingHorizontal","borderTopRightRadius","borderBottomRightRadius","flx","display","flexDirection","header","spacing","tpRg","middleSection","flex","fontFamily","fonts","paddingBottom","tpMd","containerStyle","flexGrow","title","fontSize","h4","letterSpacing","letterSpacingS","color","colors","primary","fontWeight","weightM","clear","sizeM","grey3","footer","sizeS","borderTopColor","borderTopWidth","leftButton","leftButtonText","rightButton","marginLeft","tpXs","icon","rightButtonText","Drawer","visible","onClear","clearText","onClose","titleIcon","titleIconOnPress","titleStatus","statusType","overlayStyle","children","showHeader","showFooter","middleSectionStyle","leftButtonTextStyle","rightButtonStyle","leftButtonOnPress","rightButtonOnPress","component","footerComponent","headerComponent","clearDisable","testID","props","styles","getSaveArea","insets","paddingTop","isVisible","onBackdropPress","style","gap","onPress","name","size","mode","type","tag","disabled","contentContainerStyle"],"sourceRoot":"../../../components","sources":["Drawer/Drawer.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
# Drawer ScrollView 布局修复
|
|
2
|
+
|
|
3
|
+
## 问题描述
|
|
4
|
+
|
|
5
|
+
之前 Drawer 组件的 ScrollView 在某些情况下,内容高度不足时无法填充整个可用空间,导致布局不理想。
|
|
6
|
+
|
|
7
|
+
## 解决方案
|
|
8
|
+
|
|
9
|
+
### 修改内容
|
|
10
|
+
|
|
11
|
+
为 ScrollView 添加 `contentContainerStyle`,使用 `flexGrow: 1` 确保内容容器能够填充整个 ScrollView。
|
|
12
|
+
|
|
13
|
+
```typescript
|
|
14
|
+
<ScrollView
|
|
15
|
+
style={[styles.middleSection, middleSectionStyle]}
|
|
16
|
+
contentContainerStyle={styles.containerStyle} // ✨ 新增
|
|
17
|
+
>
|
|
18
|
+
{component}
|
|
19
|
+
{children}
|
|
20
|
+
</ScrollView>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### 样式定义
|
|
24
|
+
|
|
25
|
+
```typescript
|
|
26
|
+
containerStyle: {
|
|
27
|
+
flexGrow: 1, // 让内容容器至少填充整个 ScrollView
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## 技术说明
|
|
32
|
+
|
|
33
|
+
### `flex: 1` vs `flexGrow: 1`
|
|
34
|
+
|
|
35
|
+
在 ScrollView 的 `contentContainerStyle` 中:
|
|
36
|
+
|
|
37
|
+
- ❌ **不要使用 `flex: 1`**
|
|
38
|
+
- `flex: 1` 是 `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0` 的简写
|
|
39
|
+
- 会让内容容器强制占据固定高度,可能破坏滚动行为
|
|
40
|
+
- 在内容超出时会导致布局问题
|
|
41
|
+
|
|
42
|
+
- ✅ **使用 `flexGrow: 1`**
|
|
43
|
+
- 允许内容容器增长以填充可用空间
|
|
44
|
+
- 当内容少时,容器会扩展填充 ScrollView
|
|
45
|
+
- 当内容多时,容器自然增长,保持滚动功能正常
|
|
46
|
+
- 不会影响 `flex-shrink` 和 `flex-basis` 的默认行为
|
|
47
|
+
|
|
48
|
+
### ScrollView 的两个样式属性
|
|
49
|
+
|
|
50
|
+
```typescript
|
|
51
|
+
// 外层容器样式(ScrollView 本身)
|
|
52
|
+
style={{
|
|
53
|
+
flex: 1, // ✅ 正确:让 ScrollView 占满可用空间
|
|
54
|
+
paddingHorizontal: 16,
|
|
55
|
+
}}
|
|
56
|
+
|
|
57
|
+
// 内层内容容器样式(包裹 children)
|
|
58
|
+
contentContainerStyle={{
|
|
59
|
+
flexGrow: 1, // ✅ 正确:让内容至少填充 ScrollView
|
|
60
|
+
paddingBottom: 20, // 内容的 padding
|
|
61
|
+
}}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## 使用场景
|
|
65
|
+
|
|
66
|
+
这个修复特别适用于:
|
|
67
|
+
|
|
68
|
+
1. **内容较少时**: 确保内容垂直居中或填充整个抽屉
|
|
69
|
+
2. **动态内容**: 内容高度可能变化的场景
|
|
70
|
+
3. **表单布局**: 需要底部按钮始终在底部的情况
|
|
71
|
+
4. **空状态**: 显示空状态提示时保持良好布局
|
|
72
|
+
|
|
73
|
+
## 示例
|
|
74
|
+
|
|
75
|
+
### 修复前
|
|
76
|
+
|
|
77
|
+
```typescript
|
|
78
|
+
// 内容少时,ScrollView 内容不填充,底部有空白
|
|
79
|
+
<Drawer visible={true}>
|
|
80
|
+
<Text>少量内容</Text>
|
|
81
|
+
</Drawer>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### 修复后
|
|
85
|
+
|
|
86
|
+
```typescript
|
|
87
|
+
// 内容少时,ScrollView 内容填充整个可用空间
|
|
88
|
+
<Drawer visible={true}>
|
|
89
|
+
<Text>少量内容</Text>
|
|
90
|
+
{/* 内容会填充整个抽屉高度 */}
|
|
91
|
+
</Drawer>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## React Native ScrollView 官方文档
|
|
95
|
+
|
|
96
|
+
根据 React Native 官方文档:
|
|
97
|
+
|
|
98
|
+
> `contentContainerStyle`: These styles will be applied to the scroll view content container which wraps all of the child views.
|
|
99
|
+
|
|
100
|
+
推荐使用:
|
|
101
|
+
- `flexGrow: 1` - 让内容至少填充容器
|
|
102
|
+
- `paddingBottom` - 内容底部间距
|
|
103
|
+
- `alignItems` - 内容对齐方式
|
|
104
|
+
|
|
105
|
+
## 注意事项
|
|
106
|
+
|
|
107
|
+
1. **不要在 contentContainerStyle 中使用 `flex: 1`**
|
|
108
|
+
- 会导致滚动行为异常
|
|
109
|
+
- 在 Web 上可能引起布局问题
|
|
110
|
+
|
|
111
|
+
2. **保持 style 中的 `flex: 1`**
|
|
112
|
+
- ScrollView 本身需要 `flex: 1` 来占据可用空间
|
|
113
|
+
- 这是在 `middleSection` 样式中定义的
|
|
114
|
+
|
|
115
|
+
3. **Web 平台兼容性**
|
|
116
|
+
- 使用 `flexGrow: 1` 在 Web 和原生平台都能正常工作
|
|
117
|
+
- 确保跨平台一致性
|
|
118
|
+
|
|
119
|
+
## 相关资源
|
|
120
|
+
|
|
121
|
+
- [React Native ScrollView 文档](https://reactnative.dev/docs/scrollview)
|
|
122
|
+
- [Flexbox 布局指南](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|
|
123
|
+
- [React Native 布局最佳实践](https://reactnative.dev/docs/flexbox)
|
|
124
|
+
|
|
125
|
+
## 版本历史
|
|
126
|
+
|
|
127
|
+
- **v1.4.18**: 修复 ScrollView 内容容器布局,使用 `flexGrow: 1`
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../components/Drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,SAAS,EACT,SAAS,EAGV,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;;
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../components/Drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,SAAS,EACT,SAAS,EAGV,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;;AAwLD,wBAAiC"}
|