react / react/react-native

textTransform Capitalize Does Not Behave As it Does in CSS

未关闭
#34,117 6 条评论 2 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

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

描述

Description

When using textTransform: 'capitalize' on a Text component in RN, if there are any characters after the first character in a given word which were already upper-case, they are then converted to lower-case. For example: "I am PSYCHED about react native" becomes, "I Am Psyched About React Native." When using CSS on the web, the result of applying the same property value on the same source text would be, "I Am PSYCHED About React Native," leaving characters which are already upper-case as they are.

This difference is observable both in iOS and Android simulators, as well as on an iOS physical device (an Android physical device was not available for testing).

I understand that React Native style props are not meant to be absolutely equivalent to CSS, but it is my understanding that the intent of the project was to create an environment which was as familiar to web developers as possible. And it sure would be nice if they behaved the same way in both environments.

If there are a significant number of users who prefer the RN implementation to the way it is implemented in CSS, certainly one solution might be to add another option for the enum (maybe "pure-capitalize," for example) so that developers could have it whichever way they like.

Version

0.64.3

Output of npx react-native info
System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Memory: 21.95 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.17.6/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8309675
    Xcode: 11.3.1/11C505 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.15.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1 
    react-native: 0.64.3 => 0.64.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
Steps to reproduce

Add the textTransform: 'capitalize' property to any Text component for which the source text contains an upper-case character in a word at some position after the initial character.

Snack, code example, screenshot, or link to a repository

Link to snack that reproduces the issue: https://snack.expo.dev/@duckandbeaver/texttransformnotlikecss

This MDN page shows how the similar property value behaves in CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

贡献指南

打开贡献指南

从这里开始

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

调研方向

从链接的 Snack 开始,将其 Text 组件的输出与链接的 MDN CSS 行为进行比较。追踪 Text 的样式 prop textTransform 在 iOS 和 Android 上的处理方式,然后为类似 "PSYCHED." 这样的大小写混合单词添加覆盖。完成标准是:capitalize 只更改首字符,同时在两个平台上保留已有的大写字符。

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

评估

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

把新 issue 发到你的邮箱

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