[Android] textAlignVertical doesn't work on nested text
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- C++
- Sterne
- 127k
- Forks
- 25.3k
- Ø Merge
- 1 T. 23 Std.
- Gemergte PRs (30 T.)
- 4
Beschreibung
This issue has already been reported (#18790), but closed for "stalling". As of React Native 0.63.3, the bug still exists.
Description
textAlignVertical works fine when set on the top-most Text component. However, if you have any nested texts (a common use case), you can not override the alignVertical in the child Text component.
React Native version:
System:
OS: Linux 5.4 Manjaro Linux
CPU: (8) x64 Intel(R) Core(TM) i7-8809G CPU @ 3.10GHz
Memory: 1.54 GB / 31.29 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.15.0 - /tmp/xfs-2fbb69bb/node
Yarn: 2.2.2 - /tmp/xfs-2fbb69bb/yarn
npm: 6.14.8 - /usr/bin/npm
Watchman: 4.9.0 - /usr/bin/watchman
SDKs:
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.0, 29.0.2, 29.0.3, 30.0.0, 30.0.1
System Images: android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.6858069
Languages:
Java: 1.8.0_265 - /usr/bin/javac
Python: 3.8.6 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: ^0.63.3 => 0.63.3
npmGlobalPackages:
react-native: Not Found
Steps To Reproduce
Create an app which renders the following component:
export default function App() {
return (
<Text>
<Text>This is text</Text>
<Text style={{textAlignVertical: 'top', fontSize: 10}}>sup!</Text>
</Text>
);
}
Expected Results
The "sup!" Text node should be aligned to the top edge of the line. Instead, "sup!" is aligned with the baseline:
Web (expected)

Android

Snack, code example, screenshot, or link to a repository:
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginnen Sie damit, das bereitgestellte Snack-Beispiel oder die Komponente aus den Reproduktionsschritten auf React Native 0.63.3 auszuführen und Android mit dem erwarteten Webverhalten zu vergleichen. Verfolgen Sie anschließend das Ausrichtungsverhalten von verschachteltem Text unter Android und überprüfen Sie dann, dass der untergeordnete Knoten „sup!“ am oberen Rand der Zeile ausgerichtet wird, ohne die Text-Ausrichtung der obersten Ebene zu beeinträchtigen.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- android, javascript, react-native
- Bereich
- mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Klar beschrieben
- Anfängerfreundlichkeit
- 42/100