React Native报错：文本字符串需在<Text>组件内渲染求助

开发者阿泽

2026-7-31

解决React Native中"Text strings must be rendered within a component"错误

问题代码

<Screen>
  <FlatList
    data={Message}
    keyExtractor={(Message) => Message.id.toString}
    renderItem={({ item }) => (
      <ListItem
        title={item.title}
        subtitle={item.description}
        image={item.image}
        onPress={() => console.log("message selected", item)}
      />
    )}
    ItemSeparatorComponent={ListItemSeparator}
  />
</Screen>;

报错信息

ERROR Error: Text strings must be rendered within a component.

This error is located at:
    in RCTView (created by View)
    in View (created by Screen)
    in Screen (created by MessagesScreen)
    in MessagesScreen (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

解决方案

修复keyExtractor的方法调用
keyExtractor中Message.id.toString是函数引用，未执行调用，会把函数本身作为key传递引发渲染异常，需改为调用方法：
```
keyExtractor={(message) => message.id.toString()}
```
（建议参数名改为小写message，避免和数据源变量Message冲突）
确保ListItem组件正确包裹文本
检查自定义ListItem组件内部，title和subtitle必须用<Text>组件包裹渲染，不能直接输出文本：
```
// 正确的ListItem文本渲染方式
<View>
  <Text>{title}</Text>
  <Text>{subtitle}</Text>
</View>
```
处理数据的空值情况
验证Message数组中每个item的title、description是否为有效字符串，添加默认值避免空值导致的渲染错误：
```
title={item.title || ''}
subtitle={item.description || ''}
```
清理Screen组件内的冗余文本节点
确保<Screen>标签内只有<FlatList>组件，没有多余的空格、换行符或直接文本，这些内容会被视为未包裹的文本节点触发错误。