React Native嵌套导航使用疑问：能否在业务页面调用navigation跳转页面

核心结论 #

• React Navigation的导航代码不需要全部写在App.js中，支持按业务模块拆分到不同文件，这也是官方推荐的可维护性写法
• 你的实现思路是正确的，当前代码无法成功跳转的原因是遗漏了Settings页面的注册步骤

问题修复方案 #

你当前只在HomeStack中注册了home这一个屏幕，没有将Settings页面注册到导航器中，导致navigation.navigate("Settings")找不到对应路由目标，需要修改App.js代码：

// 首先导入你的Settings页面
import Settings from './你的Settings页面路径/settings.js'

function HomeNavigator() {
  return(
    <HomeStack.Navigator>
        <HomeStack.Screen 
        name="home" 
        component={Home}
        options={{
          headerShown: false
        }}/>
        {/* 新增Settings屏幕注册，name属性要和跳转时的字符串完全一致 */}
        <HomeStack.Screen 
        name="Settings" 
        component={Settings}
        />
    </HomeStack.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer>
      <HomeNavigator/>
    </NavigationContainer>
  )
}

修改完成后你Home页面的跳转逻辑就可以正常运行了。

补充认知点帮你理清导航逻辑 #

• 所有需要通过navigation.navigate跳转的页面，都必须提前在对应导航器中注册，注册时的name参数就是跳转的唯一标识，大小写必须完全匹配
• 所有被注册为导航器Screen的组件，都会自动收到props里的navigation和route对象，你Home组件解构navigation的写法是完全正确的
• 后续路由复杂度提升后，你可以把不同业务模块的导航器单独抽成独立文件，App.js仅保留NavigationContainer和根导航器的引用即可，不用把所有导航逻辑都堆在App.js中

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