react / react/react-native

(Android) Incorrect text positioning for a Text with a thick border

Offen
#38,518 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Issue: Author Provided Repro Needs: Triage :mag: Platform: Android
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

Description

For a Text element, the border does not offset the content position on Android.

Possibly related to https://github.com/facebook/react-native/issues/38517.

React Native Version

0.72.3

Output of npx react-native info

System:
OS: Windows 10 10.0.19045
CPU: (32) x64 AMD Ryzen Threadripper PRO 3955WX 16-Cores
Memory: 92.13 GB / 127.86 GB
Binaries:
Node:
version: 20.4.0
path: C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm:
version: 9.8.0
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-222.4459.24.2221.10121639
Visual Studio:

  • 17.6.33723.286 (Visual Studio Community 2022)
    Languages:
    Java: 1.8.0_372
    Ruby: Not Found
    npmPackages:
    "@react-native-community/cli": Not Found
    react:
    installed: 18.2.0
    wanted: 18.2.0
    react-native:
    installed: 0.72.3
    wanted: 0.72.3
    react-native-windows: Not Found
    npmGlobalPackages:
    "react-native": Not Found
    Android:
    hermesEnabled: true
    newArchEnabled: false
    iOS:
    hermesEnabled: Not found
    newArchEnabled: Not found
Steps to reproduce

Create a Text with a thick border: the content appears over the border rather than below. See example below.

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/qdar-dc_I

<View style={{flex:1, paddingTop:30}}>
    <Text style={{borderTopWidth:20, borderColor:'yellow', backgroundColor:'cyan'}}>text</Text>
</View>

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 damit, das Android-Layout aus dem verlinkten Snack mit React Native 0.72.3 nachzubilden, wobei ein Text mit einem oberen Rand von 20px verwendet wird. Vergleiche die Position des gerenderten Inhalts mit dem Rand und bestätige, dass das abgeschlossene Verhalten den Text unterhalb des Randes platziert, ohne das gemeldete Beispiel zu beeinflussen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

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

Neue Issues direkt in Ihr Postfach

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