Skip to content

📱 React native custom scroll bar (indicator) | RN 自定义滑动指示器(滚动条)

Notifications You must be signed in to change notification settings

JevonsCode/react-native-custom-scroll-indicator

Repository files navigation

react-native-custom-scroll-indicator

React native custom scroll bar (indicator)

RN 自定义滑动指示器(滚动条)

PRs Welcome Current npm package version.

Installation / 安装

yarn add react-native-custom-scroll-indicator

Example

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

react-native-custom-scroll-indicator


react-native-custom-scroll-indicator


react-native-custom-scroll-indicator

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 / 指示器背景的长度默认加上指示器的长度

About

📱 React native custom scroll bar (indicator) | RN 自定义滑动指示器(滚动条)

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published