React-Navigation库报错：文本字符串需在<Text>组件内渲染，求解决方案

错误信息 #

Error: Text strings must be rendered within a component.
错误位置：
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in Provider (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), js engine: hermes

问题分析 #

你的App.tsx代码中，<RootNavigator />标签后面多了一个分号;。这个分号会被React解析成独立的文本节点，而React Native要求所有文本内容必须包裹在<Text>组件内，因此触发了该错误。RootNavigator和Home组件的代码逻辑没有问题。

修复方案 #

修改App.tsx，移除<RootNavigator />后的分号：

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import RootNavigator from "./router/RootNavigator";
import { Provider } from "react-redux";
import { store } from "./store/store";
import { NavigationContainer } from "@react-navigation/native";

export default function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <RootNavigator />
      </NavigationContainer>
    </Provider>
  );
}

验证 #

修改后重新运行项目，错误会消失，导航配置可正常工作。

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