callstack / callstack/react-native-paper

React Native 0.73 supports `transformOrigin` which can potentially fix TextInput issues

未关闭
#4,341 2 条评论 2 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

See related source code:
https://github.com/callstack/react-native-paper/blob/813cdd47a90ee3bb693c6ec143af73092cd3edae/src/components/TextInput/Label/InputLabel.tsx#L62

See React Native 0.73 docs mentioning `transformOrigin` https://reactnative.dev/docs/0.73/transforms#transform-origin

It means we do not need to move TextInput label with [translateX](https://github.com/callstack/react-native-paper/blob/813cdd47a90ee3bb693c6ec143af73092cd3edae/src/components/TextInput/Label/InputLabel.tsx#L63) to adjust label position after [scaling](https://github.com/callstack/react-native-paper/blob/813cdd47a90ee3bb693c6ec143af73092cd3edae/src/components/TextInput/Label/InputLabel.tsx#L102). Most likely `translateX` was needed b/c transform origin was always related to `center` before v0.73. Now we can set it `left` and remove `translateX` position adjustments.

Related issues:
https://github.com/callstack/react-native-paper/issues/4245
https://github.com/callstack/react-native-paper/issues/4299
https://github.com/callstack/react-native-paper/issues/4340
and possibly more related issues reporting TextInput label flickering..

贡献指南

打开贡献指南

调研方向

从 src/components/TextInput/Label/InputLabel.tsx 开始,重点查看第 62、63 和 102 行的变换,然后将其与 React Native 0.73 的 transformOrigin 文档进行比较。查看相关 Issue 4245、4299 和 4340,了解已报告的 label 行为。完成的标准是验证所提议的 transformOrigin 方案,并确认 TextInput label 的定位和闪烁问题已得到解决。

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

评估

技术栈
react-native, typescript
领域
mobile
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
42/100

把新 issue 发到你的邮箱

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