@sdcx/bottom-sheet 1.0.1 → 1.0.2
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/README.md +48 -47
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,8 +4,9 @@
|
|
|
4
4
|
|
|
5
5
|
它位于屏幕底部，可拖拽，支持嵌套滚动，可以和可滚动视图（`FlatList`, `FlashList`, `WebView` 等等）一起使用。
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
| | |
|
|
8
|
+
| ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
9
|
+
| <img src="https://raw.githubusercontent.com/sdcxtech/react-native-troika/master/packages/bottom-sheet/docs/assets/scrollview.gif" width="320"> | <img src="https://raw.githubusercontent.com/sdcxtech/react-native-troika/master/packages/bottom-sheet/docs/assets/pagerview.gif" width="320"> |
|
|
9
10
|
|
|
10
11
|
## 版本兼容
|
|
11
12
|
|
|
@@ -30,22 +31,22 @@ pod install
|
|
|
30
31
|
import BottomSheet from '@sdcx/bottom-sheet';
|
|
31
32
|
|
|
32
33
|
const App = () => {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
34
|
+
return (
|
|
35
|
+
<View style={styles.container}>
|
|
36
|
+
<ScrollView>...</ScrollView>
|
|
37
|
+
<BottomSheet peeekHeight={200}>
|
|
38
|
+
{
|
|
39
|
+
// 在这里放置你的内容，可以是任何组件，如：
|
|
40
|
+
}
|
|
41
|
+
<View />
|
|
42
|
+
<PagerView>
|
|
43
|
+
<FlatList nestedScrollEnabled />
|
|
44
|
+
<ScrollView nestedScrollEnabled />
|
|
45
|
+
<WebView />
|
|
46
|
+
</PagerView>
|
|
47
|
+
</BottomSheet>
|
|
48
|
+
</View>
|
|
49
|
+
);
|
|
49
50
|
};
|
|
50
51
|
```
|
|
51
52
|
|
|
@@ -66,47 +67,47 @@ const App = () => {
|
|
|
66
67
|
|
|
67
68
|
### 属性
|
|
68
69
|
|
|
69
|
-
-
|
|
70
|
+
- `peekHeight`, 是指 BottomSheet 收起时，在屏幕上露出的高度，默认是 200。
|
|
70
71
|
|
|
71
|
-
-
|
|
72
|
+
- `state`, 是指 BottomSheet 的状态，有三种状态：
|
|
72
73
|
|
|
73
|
-
|
|
74
|
+
- `'collapsed'`，收起状态，此时 BottomSheet 的高度为 `peekHeight`。
|
|
74
75
|
|
|
75
|
-
|
|
76
|
+
- `'expanded'`，展开状态，此时 BottomSheet 的高度为父组件的高度或内容的高度，参考 `fitToContents` 属性。
|
|
76
77
|
|
|
77
|
-
|
|
78
|
+
- `'hidden'`，隐藏状态，此时 BottomSheet 的高度为 0。
|
|
78
79
|
|
|
79
|
-
-
|
|
80
|
+
- `fitToContents`，是指 BottomSheet 在展开时，是否适应内容的高度，默认是 `false`。当和可滚动列表，譬如 ScrollView 一起使用时，请保持默认值。
|
|
80
81
|
|
|
81
|
-
-
|
|
82
|
+
- `contentContainerStyle`，用来设置内层视图的样式。
|
|
82
83
|
|
|
83
84
|
### 回调
|
|
84
85
|
|
|
85
|
-
-
|
|
86
|
+
- `onStateChanged`, 是指 BottomSheet 状态变化时的回调，它和 `state` 属性是一对，用来实现受控模式。
|
|
86
87
|
|
|
87
|
-
|
|
88
|
-
|
|
88
|
+
```tsx
|
|
89
|
+
export type BottomSheetState = 'collapsed' | 'expanded' | 'hidden';
|
|
89
90
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
91
|
+
export interface StateChangedEventData {
|
|
92
|
+
state: BottomSheetState;
|
|
93
|
+
}
|
|
93
94
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
95
|
+
interface NativeBottomSheetProps extends ViewProps {
|
|
96
|
+
onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void;
|
|
97
|
+
}
|
|
98
|
+
```
|
|
98
99
|
|
|
99
|
-
-
|
|
100
|
+
- `onSlide`, 是指 BottomSheet 滑动时的回调，可以用它来实现一些动画效果。
|
|
100
101
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
102
|
+
```tsx
|
|
103
|
+
export interface OffsetChangedEventData {
|
|
104
|
+
progress: number; // 是指 `BottomSheet` 当前的位置在 `collapsedOffset` 和 `expandedOffset` 之间的比例，它的值在 0 和 1 之间。
|
|
105
|
+
offset: number; // 是指 `BottomSheet` 当前的位置，它的值在 `collapsedOffset` 和 `expandedOffset` 之间。
|
|
106
|
+
expandedOffset: number; // 是指 `BottomSheet` 完全展开时，内层顶部距离外层顶部的距离，通常是 0。但如果设置了 `fitToContents` 属性，则可能大于 0。
|
|
107
|
+
collapsedOffset: number; // 是指 `BottomSheet` 完全收起时，内层顶部距离外层顶部的距离。可以看到，它的值等于外层的高度减去 `peekHeight`。
|
|
108
|
+
}
|
|
108
109
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
110
|
+
interface NativeBottomSheetProps extends ViewProps {
|
|
111
|
+
onSlide?: (event: NativeSyntheticEvent<OffsetChangedEventData>) => void;
|
|
112
|
+
}
|
|
113
|
+
```
|