react / react/react-native

lineHeight not distributed evenly in TextInput

未关闭
#39,145 22 条评论 13 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

Component: TextInput Issue: Author Provided Repro Newer Patch Available
主要语言
C++
星标
127k
派生
25.3k
平均合并
1 天 23 小时
30 天内合并 PR
4

描述

Description

When you have a TextInput with lineHeight > fontSize the remaining space isn't distributed evenly around the text. For example:

<View style={styles.container}>
  <Text style={styles.text}>Text</Text>
  <TextInput style={styles.text} value="TextInput" />
</View>
const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: 10,
  },
  text: {
    fontFamily: 'Inter-Regular',
    fontSize: 16,
    lineHeight: 26,
    letterSpacing: -0.01,
    color: '#111827',
    textAlignVertical: 'top',
    padding: 0,
    backgroundColor: 'pink',
  },
});

Result:
All the extra space in the TextInput case is on top of the text, making it hard to vertically align TextInputs (e.g. with a Text label preceding it on the same line).

both

React Native Version

0.71.7

Output of npx react-native info
System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 63.06 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: Not Found
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
    Watchman: 2023.07.03.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.12.1 - /Users/tibbe/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 2022.2 AI-222.4459.24.2221.10121639
    Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.19 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.7 => 0.71.7 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
Steps to reproduce

Use the above snippet in the iOS simulator.

Snack, screenshot, or link to a repository

https://snack.expo.dev/UEBid9Vxh

贡献指南

打开贡献指南

从这里开始

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

调研方向

首先在 iOS 模拟器中运行链接的 Snack,并比较 lineHeight 大于 fontSize 时的 Text 和 TextInput 示例。跟踪负责垂直放置文本的 TextInput 入口点,然后验证剩余的行高空间是否均匀分布在文本周围,同时不会使所示的对齐情况出现回归。

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

评估

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

把新 issue 发到你的邮箱

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