Skip to content

Commit 3e99a40

Browse files
JevonsCodeJevonsCode
committed
feat: 修改示例 & add Readme
1 parent 27bf624 commit 3e99a40

File tree

4 files changed

+194
-7
lines changed

4 files changed

+194
-7
lines changed

‎App.tsx‎

Lines changed: 105 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010

1111
import React from 'react';
1212
import {
13-
SafeAreaView,
1413
StyleSheet,
1514
ScrollView,
1615
View,
@@ -29,11 +28,24 @@ class App extends React.PureComponent {
2928

3029
Item = () => <View style={[styles.item, { backgroundColor: "#" + new Array(7).join(Math.floor(Math.random() * 10) + "") }]}></View>;
3130

31+
IconItem = ({ title }: { title: string }) => <View style={{
32+
justifyContent: "center",
33+
alignItems: "center", width: width / 5,
34+
}}>
35+
<View style={{
36+
width: 40, height: 40, margin: 4,
37+
backgroundColor: "#" + new Array(7).join(Math.floor(Math.random() * 10) + ""),
38+
borderRadius: 20
39+
}}></View>
40+
<Text>{title}</Text>
41+
</View>
42+
3243
render() {
3344
return (
34-
<SafeAreaView>
45+
<View style={{ flex: 1, backgroundColor: "#eee" }}>
3546
<ScrollView>
3647
<ScrollIndicator
48+
indicatorBgPadding={6}
3749
viewBoxStyle={{
3850
alignItems: "center",
3951
marginTop: 60
@@ -66,6 +78,10 @@ class App extends React.PureComponent {
6678

6779
<ScrollIndicator
6880
indicatorBgPadding={6}
81+
alwaysIndicatorBounce
82+
indicatorBoxStyle={{
83+
overflow: "visible"
84+
}}
6985
viewBoxStyle={{
7086
alignItems: "center",
7187
marginTop: 60
@@ -79,8 +95,94 @@ class App extends React.PureComponent {
7995
<this.Item />
8096
<this.Item />
8197
</ScrollIndicator>
98+
99+
<ScrollIndicator
100+
indicatorBoxStyle={{
101+
overflow: "visible"
102+
}}
103+
viewBoxStyle={{
104+
alignItems: "center",
105+
marginTop: 60,
106+
backgroundColor: "#fff",
107+
paddingVertical: 20,
108+
borderRadius: 10
109+
}} scrollViewBoxStyle={{
110+
width,
111+
}} indicatorBackgroundStyle={{
112+
backgroundColor: "#eee",
113+
borderRadius: 4,
114+
width: 20,
115+
height: 4
116+
}} indicatorStyle={{
117+
backgroundColor: "#007FFF",
118+
height: 4,
119+
borderRadius: 4,
120+
}}>
121+
<View>
122+
<this.IconItem title={"一个App"} />
123+
<this.IconItem title={"美食"} />
124+
</View>
125+
<View>
126+
<this.IconItem title={"外卖"} />
127+
<this.IconItem title={"娱乐"} />
128+
</View>
129+
<View>
130+
<this.IconItem title={"游戏"} />
131+
<this.IconItem title={"送药上门"} />
132+
</View>
133+
<View>
134+
<this.IconItem title={"打车"} />
135+
<this.IconItem title={"运动健身"} />
136+
</View>
137+
<View>
138+
<this.IconItem title={"学习"} />
139+
<this.IconItem title={"前端"} />
140+
</View>
141+
<View>
142+
<this.IconItem title={"react native"} />
143+
<this.IconItem title={"教育培训"} />
144+
</View>
145+
<View>
146+
<this.IconItem title={"景点/门票"} />
147+
<this.IconItem title={"买菜"} />
148+
</View>
149+
<View>
150+
<this.IconItem title={"不知道干啥"} />
151+
<this.IconItem title={"Git"} />
152+
</View>
153+
<View>
154+
<this.IconItem title={"嗯哼"} />
155+
<this.IconItem title={"演出"} />
156+
</View>
157+
<View>
158+
<this.IconItem title={"生活"} />
159+
<this.IconItem title={"全部"} />
160+
</View>
161+
</ScrollIndicator>
162+
163+
164+
<View style={{
165+
width,
166+
marginBottom: 400
167+
}}>
168+
<ScrollIndicator
169+
viewBoxStyle={{
170+
alignItems: "center",
171+
marginTop: 60,
172+
flex: 1
173+
}} scrollViewBoxStyle={{
174+
width: undefined
175+
}}>
176+
<this.Item />
177+
<this.Item />
178+
<this.Item />
179+
<this.Item />
180+
<this.Item />
181+
<this.Item />
182+
</ScrollIndicator>
183+
</View>
82184
</ScrollView>
83-
</SafeAreaView>
185+
</View>
84186
);
85187
}
86188
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "scroll_bar",
2+
"name": "react-native-scroll-indicator",
33
"version": "0.0.1",
44
"private": true,
55
"scripts": {

‎readme.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
# react-native-scroll-indicator
2+
3+
>React native custom scroll bar (indicator)
4+
>
5+
>RN 自定义滑动指示器（滚动条）
6+
7+
## Installation / 安装
8+
9+
10+
11+
12+
13+
## Example
14+
15+
16+
17+
18+
19+
## Usage / 使用
20+
21+
General / 基础使用
22+
23+
```tsx
24+
<ScrollIndicator
25+
viewBoxStyle={{
26+
alignItems: "center",
27+
marginTop: 60,
28+
flex: 1
29+
}} scrollViewBoxStyle={{
30+
width: undefined
31+
}}>
32+
<this.Item />
33+
<this.Item />
34+
<this.Item />
35+
<this.Item />
36+
<this.Item />
37+
<this.Item />
38+
</ScrollIndicator>
39+
```
40+
41+
Advanced / 进阶用法
42+
43+
```tsx
44+
<ScrollIndicator
45+
indicatorBgPadding={6}
46+
viewBoxStyle={{
47+
alignItems: "center",
48+
marginTop: 60
49+
}}
50+
indicatorBackgroundStyle={{
51+
height: 4,
52+
width: 40,
53+
borderRadius: 5
54+
}} indicatorStyle={{
55+
height: 2,
56+
width: 40,
57+
borderRadius: 4
58+
}} indicatorBoxStyle={{
59+
marginTop: 10,
60+
justifyContent: "center",
61+
alignItems: "center"
62+
}} scrollViewBoxStyle={{
63+
borderWidth: 2,
64+
width: 300,
65+
borderColor: "red"
66+
}}>
67+
<Content />
68+
</ScrollIndicator>
69+
```
70+
71+
## API
72+
73+
| Props | Description | Type | Default |
74+
| :----------------------: | :---------: | :--------------------: | :-----: |
75+
| viewBoxStyle | entire component View style / 整个组件的样式 | StyleProp<ViewStyle> | |
76+
| scrollViewBoxStyle | ScrollView outline style / 被滑动的 ScrollView 外部的 View 的样式 | StyleProp<ViewStyle> | |
77+
| scrollViewStyle | ScrollView style /被滑动的 ScrollView 的样式 | StyleProp<ViewStyle> | |
78+
| indicatorBgPadding | The sum of the two ends of the indicator background / 指示器的背景两端延伸之和 | number | 0 |
79+
| indicatorBackgroundStyle | Indicator background style / 指示器的背景样式 | StyleProp<ViewStyle> | width：140; height: 8; * |
80+
| indicatorStyle | Indicator style / 指示器的样式 | StyleProp<ViewStyle> | width：20; height: 4; |
81+
| indicatorBoxStyle | Indicator outline View style / 指示器外 View 的样式 | StyleProp<ViewStyle> | * |
82+
| alwaysIndicatorBounce | Always turn on the rebound effect of the indicator / 总是开启指示器的回弹效果 | boolean | false |
83+
| animatedScrollViewParams | Animated.ScrollView params / Animated.ScrollView 的原生参数 | ScrollViewProps | |
84+
| onScrollListener | Callback when sliding / 滑动时的回调 | (*e*: NativeSyntheticEvent<unknown>) => void | |
85+
86+
\* The length of the indicator background defaults to **add** the length of the indicator / 指示器背景的长度默认**加上**指示器的长度
87+

‎src/Indicator.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,6 @@ interface INativeEvent {
4242
}
4343
}
4444

45-
const height = 5;
46-
4745
export default class Indicator extends React.PureComponent<IIndicator> {
4846
leftValue = new Animated.Value(0);
4947

@@ -52,7 +50,7 @@ export default class Indicator extends React.PureComponent<IIndicator> {
5250
defaultParams = {
5351
indicatorWidth: 20,
5452
indicatorHeight: 4,
55-
indicatorBgWidth: 40,
53+
indicatorBgWidth: 140,
5654
indicatorBgHeight: 8,
5755
};
5856

0 commit comments

Comments
 (0)