我如何在本机滚动条中设置滚动指示器的样式 [英] How can i style the scroll indicator in react native scrollbar

问题描述

我想在 react native 的垂直滚动条中为我的滚动指示器添加一些样式.我想让滚动指示器比默认大小更宽，以便用户可以清楚地看到滚动指示器.以及我想更改滚动指示器中的颜色和其他一些东西.

I want to add some style to the my scroll indicator in vertical scrollbar use in react native.I want to make the scroll indicator more wider than default size so that the user will clearly see the scroll indicator. As well as i want to change the colors and some other stuffs in scroll indicator.

我该怎么办.是否可以在 React Native 的垂直滚动视图中设置滚动指示器..

How can i do so. is it possible to stlye the scroll indicator in vertical scroll view in react native..

也应该兼容任何平台

推荐答案

您应该在滚动时添加侦听器，然后创建自定义视图并由于 scrollListener 和不可见的滚动指示器而对其进行转换，这是您想要的简单实现:

you should add Listener on scroll then create a custom view and transform it due to scrollListener and invisible scroll indicator this is simple implementation of what you want:

class CustomScrollview extends PureComponent {
    state = {
        indicator: new Animated.Value(0),
        wholeHeight: 1,
        visibleHeight: 0
    }
    render() {
        const indicatorSize = this.state.wholeHeight > this.state.visibleHeight ?
            this.state.visibleHeight * this.state.visibleHeight / this.state.wholeHeight :
            this.state.visibleHeight

        const difference = this.state.visibleHeight > indicatorSize ? this.state.visibleHeight - indicatorSize : 1
        return (
            <View >
                <ScrollView
                    showsVerticalScrollIndicator={false}
                    onContentSizeChange={(width, height) => {
                        this.setState({ wholeHeight: height })
                    }}
                    onLayout={({ nativeEvent: { layout: { x, y, width, height } } }) => this.setState({ visibleHeight: height })}
                    scrollEventThrottle={16}
                    onScroll={Animated.event(
                        [{ nativeEvent: { contentOffset: { y: this.state.indicator } } }]
                    )}>


                </ScrollView >
                <View style={styles.indicatorWrapper} />
                <Animated.View style={[
                    styles.indicator, {
                        height: indicatorSize,
                        transform: [{
                            translateY: Animated.multiply(this.state.indicator, this.state.visibleHeight / this.state.wholeHeight).interpolate({
                                inputRange: [0, difference],
                                outputRange: [0, difference],
                                extrapolate: 'clamp'
                            })
                        }]
                    }]} />

            </View>
        )
    }
}

希望对您有所帮助！

这篇关于我如何在本机滚动条中设置滚动指示器的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！