Unable to move the thumb position from outside the slider when having a custom thumbImage
Dieses Issue hat noch niemand übernommen.
Bewertung
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Anfängerfreundlichkeit
- 35/100
- Issue-Typ
- Bug
- Klarheit
- Größtenteils klar
- Aktivitätsstatus
- Veraltet
- Tech-Stack
- react-native, typescript
- Bereich
- mobile
Rechercherichtung
Beginne damit, das kontrollierte Slider-Beispiel mit einem benutzerdefinierten thumbImage zu reproduzieren, und vergleiche es mit dem Standardverhalten des Thumbs. Verfolge, wie externe Wertänderungen angewendet werden, wenn thumbImage gesetzt ist; abgeschlossen ist die Aufgabe, wenn das Drücken der Schaltfläche den benutzerdefinierten Thumb wie ohne benutzerdefiniertes Bild an Position 0 bewegt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
Environment
- react-native info output:
// react-native info
Expo v53
-
are you using the new architecture?
yes -
which version of react & react-native are you using?
React 19 and React Native v0.79.2
Description
When having a custom thumbImage, the position of the thumb is not able to be updated from outside the Slider. For example, if you have a useEffect that change the value of the slider, the thumb position is being moved when thumbImage is by default. However, with a custom thumbImage, it's not the case.
Reproducible Demo
If you have something like this, clicking the button should move well the thumb position to position 0:
const [value, setValue] = useState<number>(20)
return (
<>
<Button
title={'Change value'}
onPress={(): void => setValue(0)}
/>
<View style={tw`justify-center`}>
<Slider
minimumValue={0}
maximumValue={100}
step={5}
value={value}
onValueChange={handleChange}
minimumTrackTintColor="#62A6E433"
maximumTrackTintColor="#62A6E433"
thumbTintColor={'#62A6E4'}
/>
</>
)
However, if you add a custom thumbImage, when clicking the button, the thumb position does not go to position 0:
const [value, setValue] = useState<number>(20)
return (
<>
<Button
title={'Change value'}
onPress={(): void => setValue(0)}
/>
<View style={tw`justify-center`}>
<Slider
minimumValue={0}
maximumValue={100}
step={5}
value={value}
onValueChange={handleChange}
minimumTrackTintColor="#62A6E433"
maximumTrackTintColor="#62A6E433"
StepMarker={(): ReactElement => <View style={tw`h-5`}></View>}
thumbTintColor={'#62A6E4'}
thumbImage={require('@src/assets/images/SliderThumb.png') as ImageURISource}
/>
</>
)
- Vorherrschende Sprache
- TypeScript
- Sterne
- 1.4k
- Forks
- 295
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beitragsleitfaden
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus callstack/react-native-slider
-
bug report
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 68/100
callstack/react-native-slider#769 ·
-
bug report platform: iOS
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 42/100
callstack/react-native-slider#782 · 6 Kommentare ·
-
bug report
Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 65/100
callstack/react-native-slider#780 · 1 Kommentar ·
-
bug report
Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 35/100
callstack/react-native-slider#767 ·
-
bug report platform: iOS
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 45/100
callstack/react-native-slider#758 · 4 Kommentare ·
Alle Issues in callstack/react-native-slider
Ähnliche Issues
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100
bcgov/bc-wallet-mobile#4761 · 1 Kommentar ·
-
external-issue to-triage
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 88/100
-
area-deployment area-integrations triage:bot-seen
Schwierigkeit 2/5 Ein halber Tag Anfängerfreundlichkeit 86/100
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 82/100
-
refactor
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100