在 JSX 和 React Native 中使用符号

Posted 2023-02-21

【中文标题】在 JSX 和 React Native 中使用符号

【英文标题】：Using symbols in JSX and React Native

【发布时间】：2018-05-10 20:29:46

【问题描述】：

我想在我的 React Native 项目中使用 this symbol。

我尝试使用这样的 Unicode 编码：

    var arrow = "U+0279C";

在 JSX 中：

   <Text>
      arrow
   </Text>

但是，这只是按字面意思显示编码：U+0279C。

那么知道如何在 JSX 中使用符号吗？

【问题讨论】：

返回ɹC，其中ɹ 是U+0279 的字符。 graphemica.com/%C9%B9

对，试试："\u279C"

行得通！为什么这种编码有效而另一种无效？

不确定，但speakingjs.com/es5/ch24.html

【参考方案1】：

您应该使用符号的 HTML 代码。

<Text>
    &#10140;
</Text>

如下文注释中所述..（重要的是，引号似乎不起作用）...

澄清一下：<Text>➜</Text> 会起作用，但<Text> '➜' </Text> 不会。

【讨论】：

澄清一下：<Text>➜</Text> 可以，但<Text> '➜' </Text> 不行。

【参考方案2】：

将此函数用于以下格式的符号：& # 1 7 4 ;

/**
 * replaces /$#d\+/ symbol with actual symbols in the given string
 * 
 * Returns given string with symbol code replaced with actual symbol
 * 
 * @param string name 
 */
export function convertSymbolsFromCode(name = '') 
  let final = null;
  if (name) 
    const val = name.match(/&#\d+;/) ? name.match(/&#\d+;/)[0] : false; // need to check whether it is an actual symbol code
    if (val) 
      const num = val.match(/\d+;/) ? val.match(/\d+;/)[0] : false; // if symbol, then get numeric code
      if (num) 
        final = num.replace(/;/g, '');
      
    
    if (final) 
      name = name.replace(/&#\d+;/g, String.fromCharCode(final));
    
  
  return name;

用法

<Text>
   convertSymbolsFromCode(this.state.unicode)
 </Text>

【参考方案3】：

提供的答案对我不起作用，因为我是从 API 动态检索 unicode 十六进制代码。我必须将它们作为 javascript 传递到 react-native jsx 代码中。

以下答案对我有用： Concatenate unicode and variable

我使用了String.fromCodePoint(parseInt(unicode, 16))，它成功了。

例子：

const unicode = unicodeHexValueFromApi //This value equals "05D2"

return(<Text>String.fromCodePoint(parseInt(unicode, 16))</Text>)

【参考方案4】：

<Text>"Any character"</Text>

这对我有用。

【讨论】：

这不如提供一个真实的例子来回答 OP 的问题或使用类似箭头的符号而不是 "Any character"。