Nested View and Text vertical alignment issue.
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
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:
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
Reproduziere das Ausrichtungsproblem aus dem App.js-Beispiel im Issue, indem du den verlinkten Snack oder eine CRNA/Expo-App verwendest und yarn ios oder yarn android ausführst. Verfolge, wie die verschachtelte View innerhalb von Text lineHeight und das vertikale Layout auf iOS und Android behandelt. Als abgeschlossen gilt die Untersuchung, wenn die verschachtelte Inside Text in derselben Zeile erscheint und vertikal an Outside Text ausgerichtet ist.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react-native
- Bereich
- mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Ruhig
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 45/100
