lineHeight not distributed evenly in TextInput
未关闭
还没有人认领这个 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).
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
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
首先在 iOS 模拟器中运行链接的 Snack,并比较 lineHeight 大于 fontSize 时的 Text 和 TextInput 示例。跟踪负责垂直放置文本的 TextInput 入口点,然后验证剩余的行高空间是否均匀分布在文本周围,同时不会使所示的对齐情况出现回归。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react-native
- 领域
- mobile
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 冷清
- 描述清晰度
- 基本清楚
- 新手友好度
- 48/100