React Native报错：Text字符串需在<Text>组件内渲染，如何解决？

错误原因 #

你的代码存在两个核心问题导致该报错：

• 组件嵌套错误：你将<Card>组件直接嵌套在了<Text>标签内部，React Native中<Text>仅能包裹文本或其他<Text>组件，无法容纳Card这类视图型组件。
• 语法冗余：条件渲染的JSX表达式末尾多了一个分号;，这个分号会被React识别为独立文本节点，触发"文本必须在组件内渲染"的规则校验。

修复后的代码 #

修改后的About组件 #

import React, { useEffect, useState } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { Card, Avatar, IconButton } from 'react-native-paper';
import Loading from '../Loader/Loading';

const About = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setLoading(false), 6000);
  }, []);

  return (
    <>
      {loading ? <Loading /> : (
        <View style={styles.container}>
          <Card style={{ padding: 100, backgroundColor: 'white' }}>
            <Card.Title 
              title="About us" 
              subtitle="Our profile"
              left={(props) => <Avatar.Icon {...props} icon="folder" />}
              right={(props) => <IconButton {...props} icon="dots-vertical" onPress={() => {}} />}
            />
            <Text>This is about us page</Text>
          </Card>
        </View>
      )}
    </>
  )
}

export default About;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center' 
  }
});

关键修改说明 #

• 移除了包裹<Card>的外层<Text>组件，让<Card>直接作为<View>的子组件。
• 删除了条件渲染代码块末尾的多余分号;，保证JSX语法合规。

修改完成后，ActivityIndicator可正常显示，加载结束后也能正确渲染About页面内容，不会再触发文本渲染错误。

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