点击‘查看更多’按钮导航至Screen2时出现导航对象未找到错误

问题根源 #

你的Home组件没有被纳入NavigationContainer的导航栈管理中——App.js里只注册了Screen2，Home不在导航上下文范围内，自然无法通过useNavigation()获取到导航对象。

修复方案 #

1. 更新App.js的导航栈 #

把Home添加到栈中，并设置为初始页面（保证App启动时先加载Home）：

// 先导入Home组件
import Home from './Home';

<NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Screen2" component={Screen2} />
    </Stack.Navigator>
</NavigationContainer>

2. 规范Home的渲染方式 #

不要在App的其他非导航栈区域单独渲染Home，必须通过导航栈的<Stack.Screen>加载，这样它才能处于导航上下文内，useNavigation()才能正常生效。

修改完成后，点击Home里的「See More..」按钮就能正常跳转到Screen2页面了。

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