react-native-custom-scroll-indicator

>React native custom scroll bar (indicator)
>
>RN 自定义滑动指示器（滚动条）


Installation / 安装

``bash
yarn add react-native-custom-scroll-indicator
`

Example

codesandbox RN-web 需要点击 Open In New Windows 然后用手机模式查看

Usage / 使用

`tsx
import ScrollIndicator from "react-native-custom-scroll-indicator";
`

General / 基础使用

`tsx
viewBoxStyle={{
alignItems: "center",
marginTop: 60,
flex: 1
}} scrollViewBoxStyle={{
width: undefined
}}>


`

Advanced / 进阶用法

`tsx
indicatorBgPadding={6}
viewBoxStyle={{
alignItems: "center",
marginTop: 60
}}
indicatorBackgroundStyle={{
height: 4,
width: 40,
borderRadius: 5
}} indicatorStyle={{
height: 2,
width: 40,
borderRadius: 4
}} indicatorBoxStyle={{
marginTop: 10,
justifyContent: "center",
alignItems: "center"
}} scrollViewBoxStyle={{
borderWidth: 2,
width: 300,
borderColor: "red"
}}>


``

API

| Props | Description | Type | Default |
| :----------------------: | :---------: | :--------------------: | :-----: |
| viewBoxStyle | entire component View style / 整个组件的样式 | StyleProp\ | |
| scrollViewBoxStyle | ScrollView outline style / 被滑动的 ScrollView 外部的 View 的样式 | StyleProp\ | |
| scrollViewStyle | ScrollView style /被滑动的 ScrollView 的样式 | StyleProp\ | |
| indicatorBgPadding | The sum of the two ends of the indicator background / 指示器的背景两端延伸之和 | number | 0 |
| indicatorBackgroundStyle | Indicator background style / 指示器的背景样式 | StyleProp\ | width：140; height: 8; * |
| indicatorStyle | Indicator style / 指示器的样式 | StyleProp\ | width：20; height: 4; |
| indicatorBoxStyle | Indicator outline View style / 指示器外 View 的样式 | StyleProp\ | * |
| alwaysIndicatorBounce(iOS) | Always turn on the rebound effect of the indicator / 总是开启指示器的回弹效果 | boolean | false |
| animatedScrollViewParams | Animated.ScrollView params / Animated.ScrollView 的原生参数 | ScrollViewProps | |
| onScrollListener | Callback when sliding / 滑动时的回调 | (e: NativeSyntheticEvent\) =\> void | |

\* The length of the indicator background defaults to add the length of the indicator / 指示器背景的长度默认加上指示器的长度