React Native底部导航报错：文本需在<Text>组件内渲染求解决方案

错误信息 #

Error: Text strings must be rendered within a component.

This error is located at:
in BottomTabBar (at SceneView.tsx:132)
in StaticContainer
in StaticContainer (at SceneView.tsx:125)
in EnsureSingleNavigator (at SceneView.tsx:124)
in SceneView (at useDescriptors.tsx:217)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:281)

问题代码片段 #

const BottomTabBar = (tabProps) => (
    <>
      {bottomTabData.tabs && bottomTabData.tabs.length && (
        <BottomTab.Navigator
          tabBarOptions={{
            safeAreaInset: { bottom: 'never', top: 'never' },
          }}
          lazy
          // eslint-disable-next-line react/jsx-props-no-spreading
          tabBar={(props) => <BottomTabComp {...props} tabsData={bottomTabData} />}
          initialRouteName={bottomTabData && bottomTabData.tabs && bottomTabData.tabs[(notifyData && notifyData.bottom_tab_index) || bottomTabData.highlighted_tab_index].title}
          // initialRouteName={bottomTabData && bottomTabData.tabs && bottomTabData.tabs[2].title}
        >
          {bottomTabData.tabs && bottomTabData.tabs.length && bottomTabData.tabs.map((tab) => (
            <BottomTab.Screen
              key={tab.id}
              name={tab.title}
              initialParams={{
                data: tabProps.route && tabProps.route.params && tabProps.route.params.data,
                notifyData,
              }}
              component={tab && tab.page_type === 'DISCOVER' ? DiscoverStack : tab.page_type === 'NOTIFICATION' ? NotificationTabStack : HomeStack}
            />
          ))}
        </BottomTab.Navigator>
      )}
    </>
  );

解决方案 #

1. 修复条件渲染的数字0问题 #

代码中bottomTabData.tabs.length在长度为0时会返回数字0，React Native会将0视为未包裹在<Text>中的文本节点，触发错误。将长度判断改为布尔值形式：

// 原代码
{bottomTabData.tabs && bottomTabData.tabs.length && (...)}

// 修改后
{bottomTabData.tabs && bottomTabData.tabs.length > 0 && (...)}

也可以用!!bottomTabData.tabs.length强制转换为布尔值，确保条件不满足时返回false（会被React忽略）而非0。

2. 检查自定义BottomTabComp组件 #

你自定义的BottomTabComp作为tabBar组件，需确保所有文本内容（如tab标题、徽章数字等）都被<Text>组件包裹。例如：
错误写法：

<TabItem>
  {tab.title}
</TabItem>

正确写法：

<TabItem>
  <Text>{tab.title}</Text>
</TabItem>

3. 确保initialRouteName取值合法 #

使用可选链操作符?.避免访问不存在的属性，并设置默认值，防止initialRouteName为空：

initialRouteName={
  bottomTabData?.tabs?.[(notifyData?.bottom_tab_index) || bottomTabData?.highlighted_tab_index]?.title 
  || 'Home' // 设置默认路由名称
}

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