React Native Paper Card.Title动态设置标题报错求助

问题核心 #

你遇到的报错'Text' cannot be used as a JSX component，本质是Text组件的来源错误——大概率是从react包导入了Text，而非React Native专用的react-native包。

解决方案 #

1. 修正Text组件的导入

确保你的Text组件是从react-native导入：

// 正确导入
import { Text } from 'react-native';
import { Card } from 'react-native-paper';

2. 正确使用嵌套Text的写法

你的原始写法本身没问题，只要导入正确就能正常运行：

<Card.Title
  title={
    <Text>
      Top {sites.length} Sights in {country.name}
    </Text>
  }
/>

3. 简化方案（无样式需求时）

如果不需要给标题内的文本设置差异化样式，直接传模板字符串更简洁：

<Card.Title
  title={`Top ${sites.length} Sights in ${country.name}`}
/>

错误原因解释 #

React的react包中也有一个Text组件，但它是针对Web DOM的，并不适用于React Native环境。RN的JSX元素要求组件具备React Native特定的生命周期和属性（比如报错中提到的render、context等），而Web版Text组件不符合这个要求，因此出现类型不匹配的报错。

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