react / react/react-native

[iOS] Ellipsis carries background from trimmed text

Offen
#37,926 7 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Component: Text Issue: Author Provided Repro Newer Patch Available Platform: iOS Resolution: Fixed
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

Description

This issue happens on iOS only:

I tried to use nested text which has background, and could be wrapped with an ellipsis. Even the nested text doesn't show, the ellipsis has the background of nested text.

<Text numberOfLines={1} ellipsizeMode={'tail'}>Long text <Text style={{backgroundColor: 'red'}}>Nested text</Text></Text>
React Native Version

0.70.6

Output of npx react-native info

System:
OS: macOS 12.5.1
CPU: (10) arm64 Apple M1 Max
Memory: 548.38 MB / 64.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
Yarn: 1.19.2 - ~/.nix-profile/bin/yarn
npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
Watchman: 4.9.0 - /Users/shidong.lin/.nix-profile/bin/watchman
Managers:
CocoaPods: 1.11.0 - /Users/shidong.lin/.nix-profile/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK:
API Levels: 30, 31, 32
Build Tools: 30.0.3
System Images: android-31 | Google Play ARM 64 v8a, android-32 | Google Play ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.9862592
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 11.0.11 - /Users/shidong.lin/.nix-profile/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: https://github.com/react-native/archive/f56cf181afcd364122f94ac8609f9b3c7b0b1afb.tar.gz => 0.70.6
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce
<Text numberOfLines={1}>Long text <Text style={{backgroundColor: 'red'}}>Nested text</Text></Text>

Just create a long text with colored nested text, check the behavior of ellipsis.

Snack, code example, screenshot, or link to a repository
<Text numberOfLines={1} ellipsizeMode={'tail'}>Long text <Text style={{backgroundColor: 'red'}}>Nested text</Text></Text>

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit der bereitgestellten React Native-Reproduktion auf iOS: ein einzeiliges verschachteltes Text mit rotem Hintergrund und einer Ellipse am Ende. Verfolge den iOS-Pfad für Textdarstellung und Kürzung, um festzustellen, warum der gekürzte verschachtelte Stil die Ellipse beeinflusst. Erledigt ist es, wenn die Ellipse nicht mehr den Hintergrund des ausgeblendeten verschachtelten Textes übernimmt, während die Reproduktion weiterhin korrekt kürzt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
ios, react-native
Bereich
mobile
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
42/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.