web-dev-qa-db-ja.com

反応ネイティブスクロールバーでスクロールインジケーターをスタイルする方法

反応ネイティブで垂直スクロールバーを使用して、スクロールインジケーターにスタイルを追加したいと思います。同様に私はスクロールインジケーターの色や他のいくつかのものを変更したいと思います。

どうすればできますか。反応ネイティブで垂直スクロールビューのスクロールインジケーターをstlyすることは可能ですか。

どのプラットフォームでも互換性があるはずです

react-nativescrollview
9
Jonny

ScrollViewのindicatorStyleプロパティを使用して色を変更できますが、サポートされているのは白、黒、またはデフォルトの3色のみです。 scrollIndicatorInsetsプロパティを使用して、インジケーターのインセットを設定できます。よりカスタムスタイルの場合は、 react-native-scroll-indicator を使用できます。

5
Vishal Jadav

スクロール時にリスナーを追加してから、カスタムビューを作成し、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>
        )
    }
}

この助けを願っています！

3
Lord Pooria