React Native栈导航导出报错：类型无效问题求助

核心错误原因 #

• 导出了JSX元素而非组件：你在栈导航文件的最后一行执行了TopsScreenExport()并导出，这会直接返回一个JSX对象，而React需要的是可复用的组件函数。
• 错误渲染导航栈对象：在TopsScreenExport里你渲染了<TopsNavStack />，但TopsNavStack是createStackNavigator()返回的导航器构造器，不是你定义的TopsScreenNav组件。
• 多余的独立导航容器：由于App中已经存在全局的Bottom Tabs Navigator（已包裹在NavigationContainer内），子栈导航不需要再单独使用NavigationContainer independent={true}，否则会创建独立导航上下文，导致跳转逻辑异常。

修正后的代码 #

栈导航文件（File a） #

import { View, TouchableOpacity, Image, Text } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

function TopsScreen ({navigation}) {
    return(
        <View>
            <TouchableOpacity 
                onPress={() => navigation.navigate('TopsScreenCont')} {/* 修正跳转目标，避免跳转到自身 */}
            >
                <Image 
                    style={liststyles2.listitems} 
                    source={require('./images/tops.png')} 
                />
            </TouchableOpacity>
            <Text style={liststyles2.listtext}>Tops</Text>
        </View>
    )
}
export { TopsScreen }

function TopsScreenCont ({navigation}) {
    return(
        <View>
            <Text style={liststyles2.listtext}>Tops</Text>
            {/* 添加返回按钮方便跳转 */}
            <TouchableOpacity onPress={() => navigation.goBack()}>
                <Text>返回</Text>
            </TouchableOpacity>
        </View>
    )
}
export { TopsScreenCont }

const TopsNavStack = createStackNavigator();

function TopsScreenNav() {
  return (
    <TopsNavStack.Navigator>
      <TopsNavStack.Screen name="TopsScreen" component={TopsScreen} />
      <TopsNavStack.Screen name="TopsScreenCont" component={TopsScreenCont} />
    </TopsNavStack.Navigator>
  );
}
// 直接导出组件函数，不要执行它
export default TopsScreenNav;

导入栈导航的文件（File b） #

import { View } from 'react-native';
import TopsScreenNav from './Tops';

const TopsCloset = () => {
    return (
        <View> 
            <TopsScreenNav />
        </View>
    );
}

export default TopsCloset;

配合Bottom Tabs Navigator使用 #

将TopsCloset作为Bottom Tab的一个屏幕即可，无需额外处理导航容器：

// App.js中的Bottom Tabs配置示例
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import TopsCloset from './path/to/TopsCloset';
// 导入其他Tab组件...

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Tops" component={TopsCloset} />
        {/* 其他Tab项 */}
      </Tab.Navigator>
    </NavigationContainer>
  );
}

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