上标React-Native文本

Question

在我的 React-Native 应用程序中，我想在文本中添加上标（指数）。

例如，

我有这样的文字：这是一个名为 test^123 的新产品。该产品可以...

所以在这个例子中^123是上标（指数）

我尝试了很多方法，但无法解决问题，因为每次文本都从另一行开始。

有人知道如何解决这个问题吗？

谢谢！

Answer 1

您可以插入您需要的上标字符的unicode值。请参阅表此处了解要使用的 unicode 值。要将这些值插入到要显示的文本中，请在要显示的字符串中使用格式 \uXXXX。在给定的示例中，字符串将为“test\u00B9\u00B2\u00B3”。

如果您需要动态构建这些上标字符串，您将需要一个简单的映射函数来接收标准数字并返回 unicode 值。

如果您希望在代码中更直接地表达，您还可以在字符串中插入 unicode 字符 - 前提是您的文件编码为 UTF-8。为此，您可以从其他来源复制字符或参阅this post，例如。也可以为这种方法制作类似的映射函数。

Answer 2

这是一个非常hacky的解决方案，但可以很好地近似英语：

function convertStringToSuperscript(str: string) {
  // more options exist: https://en.wikipedia.org/wiki/Unicode_subscripts_and_superscripts
  const superscriptUpperCase = ['ᴬ', 'ᴮ', 'ᶜ', 'ᴰ', 'ᴱ', 'ᴭ', 'ᴳ', 'ᴴ', 'ᴵ', 'ᴶ', 'ᴷ', 'ᴸ', 'ᴹ', 'ᴺ', 'ᴼ', 'ᴾ', 'ᶞ', 'ᴿ', 'ˢ', 'ᵀ', 'ᵁ', 'ᵛ', 'ᵂ', 'ᵡ', 'ᵞ', 'ᶻ'];
  const superscriptLowerCase = ['ᵃ', 'ᵇ', 'ᶜ', 'ᵈ', 'ᵉ', 'ᶠ', 'ᵍ', 'ʰ', 'ⁱ', 'ʲ', 'ᵏ', 'ˡ', 'ᵐ', 'ⁿ', 'ᵒ', 'ᵖ', 'ᶞ', 'ʳ', 'ˢ', 'ᵗ', 'ᵘ', 'ᵛ', 'ʷ', 'ˣ', 'ʸ', 'ᶻ'];
  const isLowerCase = (code: number) => code >= 97 && code <= 122   // A:65 - Z:90
  const isUpperCase = (code: number) => code >= 65 && code <= 90    // a:95 - z:122
  const toSuperscript = (char: string): string => {
    const code = char.charCodeAt(0)
    if (isLowerCase(code)) return superscriptLowerCase[code - 97]
    if (isUpperCase(code)) return superscriptUpperCase[code - 65]
    // if not in range return character as it was
    return char
  }
  // this part isn't very optimized
  return str.split("").map(toSuperscript).join("")
}