[Android] textAlignVertical doesn't work on nested text
Personne n'a encore pris cette issue.
- Langage dominant
- C++
- Étoiles
- 127k
- Forks
- 25.3k
- Merge moyen
- 1 j 23 h
- PR mergées (30 j)
- 4
Description
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:
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par exécuter l’exemple Snack fourni ou le composant des étapes de reproduction sur React Native 0.63.3 et comparez Android au comportement attendu sur le web. Suivez ensuite le comportement d’alignement de Text imbriqué sur Android, puis vérifiez que le nœud enfant « sup! » s’aligne sur le bord supérieur de la ligne sans perturber l’alignement de Text de niveau supérieur.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- android, javascript, react-native
- Domaine
- mobile
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Clairement spécifiée
- Accessibilité débutants
- 42/100