我如何在反应本机滚动条中设置滚动指示器的样式

Question

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

我怎么能这样做。是否可以在本机的垂直滚动视图中设置滚动指示器..

也应该在任何平台上兼容

原文由 Jonny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 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>
        )
    }
}

希望这有帮助！

原文由 Lord Pooria 发布，翻译遵循 CC BY-SA 4.0 许可协议