react-native-custom-scroll-indicator

React native custom scroll bar (indicator)

RN 自定义滑动指示器（滚动条）

Installation / 安装

yarn add react-native-custom-scroll-indicator

Example

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

Usage / 使用

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

General / 基础使用

<ScrollIndicator
    viewBoxStyle={{
        alignItems: "center",
        marginTop: 60,
        flex: 1
    }} scrollViewBoxStyle={{
        width: undefined
    }}>
    <Content />
</ScrollIndicator>

Advanced / 进阶用法

<ScrollIndicator
    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"
    }}>
    <Content />
</ScrollIndicator>

API

Props	Description	Type	Default
viewBoxStyle	entire component View style / 整个组件的样式	StyleProp<ViewStyle>
scrollViewBoxStyle	ScrollView outline style / 被滑动的 ScrollView 外部的 View 的样式	StyleProp<ViewStyle>
scrollViewStyle	ScrollView style /被滑动的 ScrollView 的样式	StyleProp<ViewStyle>
indicatorBgPadding	The sum of the two ends of the indicator background / 指示器的背景两端延伸之和	number	0
indicatorBackgroundStyle	Indicator background style / 指示器的背景样式	StyleProp<ViewStyle>	width：140; height: 8; *
indicatorStyle	Indicator style / 指示器的样式	StyleProp<ViewStyle>	width：20; height: 4;
indicatorBoxStyle	Indicator outline View style / 指示器外 View 的样式	StyleProp<ViewStyle>	*
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<unknown>) => void

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