Puisque setState change la valeur du curseur dans l'état et se produit après le mouvement réel du curseur, le curseur est un peu en retard. J'ai vu des gens utiliser le anti-rebond pour résoudre ce problème, mais cela ne fonctionne pas très bien et j'ai l'impression qu'il doit y avoir une solution plus pragmatique. Le debouncing rend simplement le problème moins apparent, il ne le résout pas à la racine.
Des idées?
<!-- language: lang-js -->
<Slider
value={this.state.someValue}
maximumValue={this.state.sliderMaximumValue}
minimumValue={0}
onValueChange={(someValue) => this.setState({someValue})}
/>
3 Réponses :
Je suggère d'utiliser onSlidingComplete au lieu de onValueChange car il définira l'état (et actualisera la vue) uniquement lorsque l'action de l'utilisateur sera terminée.
MODIFIER Cela n'affectera pas votre mise à jour sur la valeur numérique affichée du curseur comme l'indique DOCS:
Ce n'est pas un composant contrôlé, vous n'avez pas besoin de mettre à jour la valeur pendant le glissement.
Avec votre code publié, il est difficile de dire ce qui se passe si vous restituez un tas d'autres choses avec votre curseur dans votre composant, puis appeler setState à chaque changement de valeur est une mauvaise chose, cela déclenche de nombreux rendus, c'est pourquoi il est à la traîne car il a trop de choses à restituer.
solutions:
1) si vous n'avez pas besoin de refléter quoi que ce soit sur l'interface utilisateur, vous pouvez faire onValueChange = {(someValue) => this.state.sliderValue = someValue} cela ne déclenchera pas le rendu mais conservera la valeur du curseur sur l'état.
2) extraire le curseur vers son propre composant pur et conserver l'état du curseur vers ce composant de cette façon lorsque vous modifiez l'état du jeu de curseurs, ne restituera que la partie du composant du curseur au lieu de l'écran entier.
j'espère que cela vous aidera.
Je ne sais pas pourquoi cela vous a découragé. Votre réponse m'a vraiment aidé et a complètement résolu mon problème de décalage! Je l'ai associé à un anti-rebond sur le réglage de la valeur du curseur de l'état, pour éviter de trembler d'avant en arrière
Vous pouvez obtenir ce que vous voulez en pas en transmettant simplement la C'est tout! : D Mais!
Si vous avez besoin d'afficher constamment une valeur changeante du curseur, (comme j'avais besoin) vous pouvez le faire: Créez 2 états dans votre composant pour un élément d'état réel. Un pour afficher et un pour être la valeur réelle à passer au J'avais un composant où je devais afficher la valeur du curseur en constante évolution, sans que le curseur ne soit en retard. J'ai donc fait ceci: Donc, vous devez passer l'état réel via le prop J'espère que je me suis fait clairement comprendre . Sinon, demandez et je développerai. :) valeur prop au const [displayTotalQuantity, setDisplayTotalQuantity] = useState(FUEL_AMOUNT_MINIMUM);
const [totalQuantity, setTotalQuantity] = useState(FUEL_AMOUNT_MINIMUM);
<Text> {displayTotalQuantity} </Text>
<Slider
style={slider.baseStyles}
step={STEP}
value={totalQuantity}
minimumValue={MINIMUM}
maximumValue={MAXIMUM}
minimumTrackTintColor={mainColors.irisBlue}
maximumTrackTintColor={mainColors.sliderMaxTintGray}
thumbTintColor={mainColors.irisBlue}
onSlidingComplete={value => setTotalQuantity(value)}
onValueChange={value => setDisplayTotalQuantity(value)}
/>
(et dans ce cas, vous n'avez pas besoin de commenter la value prop ). <!-- language: lang-js -->
<Slider
// value={this.state.someValue} // commented out :D
maximumValue={this.state.sliderMaximumValue}
minimumValue={0}
onValueChange={(someValue) => this.setState({someValue})}
/>
value , mais ne le mettez à jour que onSlidingComplete . D'autre part, mettez à jour l'état display à chaque changement, c'est-à-dire onValueChange et affichez-le dans un composant de texte.