react / react/react-native

Nested View and Text vertical alignment issue.

未关闭
#31,955 23 条评论 24 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

Needs: Triage :mag:
主要语言
C++
星标
127k
派生
25.3k
平均合并
1 天 23 小时
30 天内合并 PR
4

描述

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

  1. Setup a CRNA or Expo app.
  2. 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",
  },
});
  1. Start your App on iOS or Android with yarn ios or yarn 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:

https://snack.expo.dev/gdbQbTirc
Screenshot 2021-08-05 at 1 40 11 AM

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

使用链接的 Snack 或 CRNA/Expo 应用并运行 yarn ios 或 yarn android,复现 issue 中 App.js 示例的对齐问题。跟踪 Text 内嵌套的 View 如何在 iOS 和 Android 上处理 lineHeight 和垂直布局。当嵌套的 Inside Text 出现在同一行,并且与 Outside Text 垂直对齐时,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
javascript, react-native
领域
mobile
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
冷清
描述清晰度
基本清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。