@sdcx/bottom-sheet 1.0.1 → 1.0.3

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.
Files changed (5) hide show
  1. package/README.md +48 -47
  2. package/ios/BottomSheet/{RNBottomSheetComponentView.h → RNBottomSheet.h} +1 -1
  3. package/ios/BottomSheet/{RNBottomSheetComponentView.mm → RNBottomSheet.mm} +5 -5
  4. package/package.json +3 -2
  5. package/react-native.config.js +10 -0
package/README.md CHANGED
@@ -4,8 +4,9 @@
4
4
 
5
5
  它位于屏幕底部，可拖拽，支持嵌套滚动，可以和可滚动视图（`FlatList`, `FlashList`, `WebView` 等等）一起使用。
6
6
 
7
- <img src="https://raw.githubusercontent.com/sdcxtech/react-native-troika/master/packages/bottom-sheet/docs/assets/scrollview.gif" width="320">
8
- <img src="https://raw.githubusercontent.com/sdcxtech/react-native-troika/master/packages/bottom-sheet/docs/assets/pagerview.gif" width="320">
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
- return (
34
- <View style={styles.container}>
35
- <ScrollView>...</ScrollView>
36
- <BottomSheet peeekHeight={200}>
37
- {
38
- // 在这里放置你的内容，可以是任何组件，如：
39
- }
40
- <View />
41
- <PagerView>
42
- <FlatList nestedScrollEnabled />
43
- <ScrollView nestedScrollEnabled />
44
- <WebView />
45
- </PagerView>
46
- </BottomSheet>
47
- </View>
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
- - `peekHeight`, 是指 BottomSheet 收起时，在屏幕上露出的高度，默认是 200。
70
+ - `peekHeight`, 是指 BottomSheet 收起时，在屏幕上露出的高度，默认是 200。
70
71
 
71
- - `state`, 是指 BottomSheet 的状态，有三种状态：
72
+ - `state`, 是指 BottomSheet 的状态，有三种状态：
72
73
 
73
- - `'collapsed'`，收起状态，此时 BottomSheet 的高度为 `peekHeight`。
74
+ - `'collapsed'`，收起状态，此时 BottomSheet 的高度为 `peekHeight`。
74
75
 
75
- - `'expanded'`，展开状态，此时 BottomSheet 的高度为父组件的高度或内容的高度，参考 `fitToContents` 属性。
76
+ - `'expanded'`，展开状态，此时 BottomSheet 的高度为父组件的高度或内容的高度，参考 `fitToContents` 属性。
76
77
 
77
- - `'hidden'`，隐藏状态，此时 BottomSheet 的高度为 0。
78
+ - `'hidden'`，隐藏状态，此时 BottomSheet 的高度为 0。
78
79
 
79
- - `fitToContents`，是指 BottomSheet 在展开时，是否适应内容的高度，默认是 `false`。当和可滚动列表，譬如 ScrollView 一起使用时，请保持默认值。
80
+ - `fitToContents`，是指 BottomSheet 在展开时，是否适应内容的高度，默认是 `false`。当和可滚动列表，譬如 ScrollView 一起使用时，请保持默认值。
80
81
 
81
- - `contentContainerStyle`，用来设置内层视图的样式。
82
+ - `contentContainerStyle`，用来设置内层视图的样式。
82
83
 
83
84
  ### 回调
84
85
 
85
- - `onStateChanged`, 是指 BottomSheet 状态变化时的回调，它和 `state` 属性是一对，用来实现受控模式。
86
+ - `onStateChanged`, 是指 BottomSheet 状态变化时的回调，它和 `state` 属性是一对，用来实现受控模式。
86
87
 
87
- ```tsx
88
- export type BottomSheetState = 'collapsed' | 'expanded' | 'hidden';
88
+ ```tsx
89
+ export type BottomSheetState = 'collapsed' | 'expanded' | 'hidden';
89
90
 
90
- export interface StateChangedEventData {
91
- state: BottomSheetState;
92
- }
91
+ export interface StateChangedEventData {
92
+ state: BottomSheetState;
93
+ }
93
94
 
94
- interface NativeBottomSheetProps extends ViewProps {
95
- onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void;
96
- }
97
- ```
95
+ interface NativeBottomSheetProps extends ViewProps {
96
+ onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void;
97
+ }
98
+ ```
98
99
 
99
- - `onSlide`, 是指 BottomSheet 滑动时的回调，可以用它来实现一些动画效果。
100
+ - `onSlide`, 是指 BottomSheet 滑动时的回调，可以用它来实现一些动画效果。
100
101
 
101
- ```tsx
102
- export interface OffsetChangedEventData {
103
- progress: number; // 是指 `BottomSheet` 当前的位置在 `collapsedOffset` 和 `expandedOffset` 之间的比例，它的值在 0 和 1 之间。
104
- offset: number; // 是指 `BottomSheet` 当前的位置，它的值在 `collapsedOffset` 和 `expandedOffset` 之间。
105
- expandedOffset: number; // 是指 `BottomSheet` 完全展开时，内层顶部距离外层顶部的距离，通常是 0。但如果设置了 `fitToContents` 属性，则可能大于 0。
106
- collapsedOffset: number; // 是指 `BottomSheet` 完全收起时，内层顶部距离外层顶部的距离。可以看到，它的值等于外层的高度减去 `peekHeight`。
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
- interface NativeBottomSheetProps extends ViewProps {
110
- onSlide?: (event: NativeSyntheticEvent<OffsetChangedEventData>) => void;
111
- }
112
- ```
110
+ interface NativeBottomSheetProps extends ViewProps {
111
+ onSlide?: (event: NativeSyntheticEvent<OffsetChangedEventData>) => void;
112
+ }
113
+ ```
package/ios/BottomSheet/{RNBottomSheetComponentView.h → RNBottomSheet.h} RENAMED
@@ -3,7 +3,7 @@
3
3
 
4
4
  NS_ASSUME_NONNULL_BEGIN
5
5
 
6
- @interface RNBottomSheetComponentView : RCTViewComponentView
6
+ @interface RNBottomSheet : RCTViewComponentView
7
7
 
8
8
  @end
9
9
 
package/ios/BottomSheet/{RNBottomSheetComponentView.mm → RNBottomSheet.mm} RENAMED
@@ -1,4 +1,4 @@
1
- #import "RNBottomSheetComponentView.h"
1
+ #import "RNBottomSheet.h"
2
2
  #import "RNBottomSheetStateChangedEvent.h"
3
3
  #import "RNBottomSheetOffsetChangedEvent.h"
4
4
 
@@ -36,7 +36,7 @@ RCTSendStateForNativeAnimations_DEPRECATED(NSInteger tag, NSString *state) {
36
36
 
37
37
  using namespace facebook::react;
38
38
 
39
- @interface RNBottomSheetComponentView () <UIGestureRecognizerDelegate>
39
+ @interface RNBottomSheet () <UIGestureRecognizerDelegate>
40
40
 
41
41
  @property(nonatomic, assign) BottomSheetStatus status;
42
42
  @property(nonatomic, assign) BottomSheetStatus finalStatus;
@@ -54,7 +54,7 @@ using namespace facebook::react;
54
54
 
55
55
  @end
56
56
 
57
- @implementation RNBottomSheetComponentView {
57
+ @implementation RNBottomSheet {
58
58
  __weak UIView *_rootView;
59
59
  BOOL _isInitialRender;
60
60
  __weak UIView *_reactRootView;
@@ -159,7 +159,7 @@ using namespace facebook::react;
159
159
  if (!self.draggable) {
160
160
  return NO;
161
161
  }
162
-
162
+
163
163
  if (gestureRecognizer != self.panGestureRecognizer) {
164
164
  return YES;
165
165
  }
@@ -524,7 +524,7 @@ using namespace facebook::react;
524
524
  if (_reactRootView) {
525
525
  return;
526
526
  }
527
-
527
+
528
528
  UIView *v = self;
529
529
  while (v) {
530
530
  if ([NSStringFromClass([v class]) isEqualToString:@"RCTSurfaceView"]) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sdcx/bottom-sheet",
3
3
  "description": "A react-native BottomSheet component.",
4
- "version": "1.0.1",
4
+ "version": "1.0.3",
5
5
  "main": "./dist/index.js",
6
6
  "typings": "./dist/index.d.ts",
7
7
  "react-native": "src/index",
@@ -11,6 +11,7 @@
11
11
  "dist",
12
12
  "android",
13
13
  "ios",
14
+ "react-native.config.js",
14
15
  "RNBottomSheet.podspec",
15
16
  "!android/build",
16
17
  "!ios/build",
@@ -45,7 +46,7 @@
45
46
  },
46
47
  "ios": {
47
48
  "componentProvider": {
48
- "BottomSheet": "RNBottomSheetComponentView"
49
+ "BottomSheet": "RNBottomSheet"
49
50
  }
50
51
  }
51
52
  }
package/react-native.config.js ADDED
@@ -0,0 +1,10 @@
1
+ module.exports = {
2
+ dependency: {
3
+ platforms: {
4
+ android: {
5
+ libraryName: 'bottomsheet',
6
+ componentDescriptors: ['BottomSheetComponentDescriptor'],
7
+ },
8
+ },
9
+ },
10
+ };