Nested View and Text vertical alignment issue.
Nessuno ha ancora preso questa issue.
- Lingua principale
- C++
- Stelle
- 127k
- Fork
- 25.3k
- Merge medio
- 1g 23h
- PR unite (30g)
- 4
Descrizione
Description
Nesting View inside Text adds lineHeight's marginBottom to View and when we add Text inside that View it doesn't gets aligned properly.
React Native version:
System:
OS: macOS 11.4
CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
Memory: 55.67 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.17.0 - /usr/local/bin/node
Yarn: 1.22.10 - ~/npm-global/bin/yarn
npm: 6.14.13 - /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.10.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: ~0.63.4 => 0.63.4
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found
Steps To Reproduce
- Setup a CRNA or Expo app.
- Replace the code in App.js with -
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.outsideText}>
Outside Text{" "}
<View style={styles.insideView}>
<Text>Inside Text</Text>
</View>
</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
outsideText: {
backgroundColor: "#cecece",
},
insideView: {
backgroundColor: "#fcc9",
},
});
- Start your App on iOS or Android with
yarn iosoryarn android.
Expected Results
The text should be in the same line aligned vertically. Like it looks when we run this example on the Web.
Snack, code example, screenshot, or link to a repository:
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Riproduci il problema di allineamento dell’esempio App.js nell’issue, usando lo Snack collegato o un’app CRNA/Expo ed eseguendo yarn ios o yarn android. Traccia il modo in cui la View annidata all’interno di Text gestisce lineHeight e il layout verticale su iOS e Android. Il lavoro è completato quando la Inside Text annidata appare sulla stessa riga ed è allineata verticalmente con Outside Text.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, react-native
- Ambito
- mobile
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Tranquilla
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 45/100
