react / react/react-native

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

Aperta
#38,518 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Issue: Author Provided Repro Needs: Triage :mag: Platform: Android
Lingua principale
C++
Stelle
127k
Fork
25.3k
Merge medio
1g 23h
PR unite (30g)
4

Descrizione

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>

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia riproducendo il layout Android dello Snack collegato con React Native 0.72.3, usando un Text con un bordo superiore di 20px. Confronta la posizione del contenuto renderizzato con il bordo e conferma che il comportamento completato posizioni il testo sotto il bordo senza influire sull'esempio segnalato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
android, react-native
Ambito
mobile
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
38/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.