React Native中React Navigation路由报错问题求助

DevOps 小满

2026-8-20

核心问题：变量名冲突

你代码里类组件和Stack导航器用了同一个名字Maincomp，这会导致JS解析时出现引用混乱，直接引发报错。

修正后的代码

把导航器的变量名改成不同的（比如MainStack），同时确保相关依赖导入正确：

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import { StackActions, NavigationActions } from 'react-navigation-stack';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Subcomp from './Subcomp'; // 确认Subcomp组件路径正确

class Maincomp extends Component {
  render() {
    return (
      <View>
        <TouchableOpacity
          onPress={() => {
            this.props.navigation.dispatch(
              StackActions.reset({
                index: 0,
                actions: [
                  NavigationActions.navigate({ routeName: 'Subcomp' }),
                ],
              }),
            );
          }}>
          <View>
            <Text>sub page Reset</Text>
            <Icon name="keyboard-arrow-right" size={25} color="#0E65B4" />
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

// 修改导航器变量名，避免与类组件冲突
const MainStack = createStackNavigator(
  {
    Maincomp: {
      screen: Maincomp,
    },
    Subcomp: {
      screen: Subcomp,
    },
  },
  {
    initialRouteName: 'Maincomp',
  },
);

export default createAppContainer(MainStack);

其他排查要点

版本适配：如果使用React Navigation 5+，createStackNavigator和createAppContainer的导入方式不同，且路由重置写法需调整：

// React Navigation 5+ 路由重置写法
onPress={() => {
  this.props.navigation.reset({
    index: 0,
    routes: [{ name: 'Subcomp' }],
  });
}}

依赖检查：确保react-navigation、react-navigation-stack、react-native-gesture-handler等依赖已正确安装（RN 0.60+版本无需手动链接）。
组件验证：确认Subcomp组件已正确定义并导出，路径引用无错误。