React Navigation报错：Cannot read property 'navigate' of undefined求解

我尝试用react navigation搭建导航功能，将导航项拆分为独立组件时遇到问题：点击s2页面的跳转按钮时出现上述错误，无法实现从s2跳转到s1的功能。

问题代码 #

App.js #

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

import S1 from './Src/Screen/s1';
import S2 from './Src/Screen/s2';

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
        <Stack.Navigator>
        <Stack.Screen
          name="s2"
          component={S2}
          options={{title: 's2'}}
        />
        <Stack.Screen name="s1" component={S1} />
      </Stack.Navigator>
    </NavigationContainer>,
     <S1></S1>,
     <S2></S2>
  );
};

export default App;

s1.js #

import * as React from 'react';
import { SafeAreaView, ScrollView ,StyleSheet,View,Text,Button, ImageBackground,Dimensions} from "react-native";

const S1 = ({ navigation })=> {
    return(
        <SafeAreaView style={{flex:1}} >
            <ScrollView>
                       <Text style={styles.myTitle}>Expore The {'\n'}Universe</Text>      
            </ScrollView>
        </SafeAreaView>
    )
}

s2.js #

import * as React from 'react';
import { SafeAreaView, ScrollView ,StyleSheet,View,Text,Button, ImageBackground,Dimensions} from "react-native";

const S2 = ({navigation})=> {
    return(
        <SafeAreaView style={{flex:1}} >
            <ScrollView>
                        <View style={styles.buttonex}>
                        <Button 
                               onPress={() => navigation.navigate('s1')}
                               title="Ex"
                         />
                        </View>                    
            </ScrollView>
        </SafeAreaView>
    )
}

报错信息 #

TypeError: Cannot read property 'navigate' of undefined, js engine: hermes

解决方案 #

问题出在App.js的return结构错误：你在NavigationContainer外部额外渲染了<S1/>和<S2/>，这两个组件不在导航上下文范围内，无法获取navigation prop；同时React组件的return只能返回单个根元素，原代码的逗号分隔写法会导致渲染异常。

只需修改App.js，移除外部的<S1/>和<S2/>，确保return仅返回NavigationContainer：

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

import S1 from './Src/Screen/s1';
import S2 from './Src/Screen/s2';

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="s2"
          component={S2}
          options={{title: 's2'}}
        />
        <Stack.Screen name="s1" component={S1} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

说明：Stack Navigator会根据导航状态自动渲染对应的页面组件，不需要手动在导航容器外重复渲染S1和S2。修改后，s2组件作为Stack.Screen的component，会自动被注入navigation prop，点击按钮即可正常跳转到s1页面。

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