web-dev-qa-db-fra.com

Comment puis-je styler l'indicateur de défilement dans Reactive Scrollbar

Je veux ajouter un peu de style à l'indicateur de défilement dans l'utilisation de la barre de défilement verticale dans react native.Je veux rendre l'indicateur de défilement plus large que la taille par défaut afin que l'utilisateur voit clairement l'indicateur de défilement. Aussi bien que je veux changer les couleurs et quelques autres trucs dans l'indicateur de défilement.

Comment le faire. est-il possible de stlye l'indicateur de défilement en vue de défilement vertical en réagir natif.

Devrait également être compatible dans n'importe quelle plate-forme

react-nativescrollview
9
Jonny

Vous pouvez utiliser les accessoires indicatorStyle de ScrollView pour changer la couleur, mais il ne prend en charge que trois couleurs blanc, noir ou par défaut. Vous pouvez définir des encarts de l'indicateur à l'aide des accessoires scrollIndicatorInsets. Pour un style plus personnalisé, vous pouvez utiliser react-native-scroll-indicator .

5
Vishal Jadav

vous devez ajouter Listener au défilement, puis créer une vue personnalisée et la transformer en raison de scrollListener et de l'indicateur de défilement invisible, c'est une implémentation simple de ce que vous voulez:

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

j'espère que cette aide!

3
Lord Pooria