React Native Stack Navigator报错求助：导航器子元素不符合要求

错误核心原因 #

Stack Navigator的直接子元素不符合规则：导航器内部仅允许放置Screen、Group或React.Fragment，你的代码中Stack.Navigator标签下存在多余的空格、换行或其他非允许元素，触发了该错误。

正确实现示例 #

你提供的仅为导入代码，完整的导航配置需遵循以下结构：

import * as React from 'react';
import { useState } from 'react';
import { Pressable, View, Text, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

// 自定义页面组件示例
const HomeScreen = () => (
  <View style={styles.container}>
    <Text>Home Screen</Text>
  </View>
);

const DetailsScreen = () => (
  <View style={styles.container}>
    <Text>Details Screen</Text>
  </View>
);

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        {/* 导航器内仅允许放置Screen/Group/Fragment，无多余空格或无效元素 */}
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

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

必做检查项 #

• 清理Stack.Navigator标签内部的多余空行、空格，仅保留合法子元素
• 所有页面组件必须通过Stack.Screen包裹，禁止直接将自定义组件放入导航器
• 如需分组管理页面，使用Stack.Group组件包裹相关Screen
• 若需渲染多组合法元素，用React.Fragment（或简写<></>）包裹，内部仍需符合子元素规则

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