React Native渲染错误：Text字符串需在<Text>组件内渲染的解决方法

错误说明 #

你遇到的渲染错误：

Render Error
Error: Text strings must be rendered within a <Text> component.

问题定位 #

你的Challenge1.jsx代码本身没有问题——所有文本内容都正确包裹在<Text>组件内，错误实际上出在**引用Challenge1的父组件（比如App.jsx）**中。从错误栈可以看到：

in Challenge1 (created by App)
in RCTText (created by Text)
in Text (created by App)

这说明Challenge1被错误地放在了<Text>组件内部，或者父组件中存在未被<Text>包裹的裸文本。

修复步骤 #

情况1：父组件将Challenge1放在Text组件内 #

如果你的App.jsx代码类似下面这样：

import { Text, View } from 'react-native-web';
import Challenge1 from './Challenge1';

export default function App() {
  return (
    <Text>
      <Challenge1 />
    </Text>
  );
}

修改为将Challenge1放在<View>（或其他容器组件）内：

import { View } from 'react-native-web';
import Challenge1 from './Challenge1';

export default function App() {
  return (
    <View>
      <Challenge1 />
    </View>
  );
}

情况2：父组件存在裸文本 #

如果父组件中有未被<Text>包裹的文本，比如：

import { View } from 'react-native-web';
import Challenge1 from './Challenge1';

export default function App() {
  return (
    <View>
      欢迎使用React Native Web
      <Challenge1 />
    </View>
  );
}

需要把所有裸文本也包裹在<Text>组件中：

import { View, Text } from 'react-native-web';
import Challenge1 from './Challenge1';

export default function App() {
  return (
    <View>
      <Text>欢迎使用React Native Web</Text>
      <Challenge1 />
    </View>
  );
}

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