React Native中如何在Text组件内输出<字符并规避JSX语法解析？

嘿，这个问题我碰到过好几次了，React Native的JSX解析规则确实会把<当成组件标签的开头，导致你没法直接在<Text>里写这类符号。不过有几种简单的解决办法，我给你一一列出来：

方法1：使用HTML实体转义 #

React Native的<Text>组件支持常见的HTML实体，你可以用<来代替<，对应的>可以用>，&用&。示例代码如下：

<Text> Math inequality: 3 &lt; 2x </Text>

这样渲染出来的文本就是Math inequality: 3 < 2x，完全符合你的需求。

方法2：将内容放在JS表达式中（大括号包裹） #

JSX只会解析外层的标签，如果你把包含<的文本放在大括号{}里（也就是JS表达式的上下文），里面的<就会被当成普通字符处理。你可以用模板字符串或者普通字符串：

// 模板字符串写法
<Text>{`Math inequality: 3 < 2x`}</Text>

// 普通字符串写法
<Text>{'Math inequality: 3 < 2x'}</Text>

这种方法很直观，适合需要写多个特殊字符或者动态内容的场景。

方法3：使用Unicode字符编码 #

每个特殊字符都有对应的Unicode编码，<的Unicode编码是\u003C，你可以直接在字符串里使用这个编码：

<Text> Math inequality: 3 {'\u003C'} 2x </Text>

这种方法适合单个特殊字符的插入，不过可读性不如前两种，一般推荐前两种方法就够了。

这三种方法都能解决你的问题，我个人最常用的是方法2，因为写起来最自然，不需要记实体或者编码。

内容的提问来源于stack exchange，提问作者Magne