navigation.navigate()工作原理及传参无限渲染问题求助

navigation.navigate()的工作原理 #

• 核心功能：在React Navigation的导航栈结构中完成页面跳转，要么将目标页面推入栈顶，要么根据配置复用栈内已存在的目标页面实例。
• 参数说明：
  • 第一个参数是路由名称，必须和导航容器中注册的页面路由名完全匹配；
  • 第二个可选参数是参数对象，可以传递任意需要的业务数据，目标页面通过route.params就能获取这些数据。
• 栈行为逻辑：默认情况下，若目标页面不在当前栈顶，会创建新的页面实例并推入栈；如果配置了screenOptions中的launchMode（如singleTop），则会复用栈顶的目标页面实例并更新参数。

带参数跳转时的无限渲染问题解决 #

无限渲染的核心原因是navigation.navigate()被放在了组件的渲染流程中（比如函数组件的顶层代码、return语句之前的无判断逻辑里），组件每次渲染都会触发跳转，跳转又会触发组件重新渲染，形成循环。

解决方法：

1. 将跳转逻辑绑定到用户交互事件：把跳转代码放到按钮点击、表单提交等明确的用户操作回调中，确保只有用户主动触发才执行跳转：

<Button
  title="进入金额输入页"
  onPress={() => {
    navigation.navigate('EnterAmount', {
      type: 'email',
      walletAddress: data,
      emailAddress: text,
    });
  }}
/>

2. 修正useEffect的使用方式：如果需要在状态变化时自动跳转，必须给useEffect设置精准的依赖项，并添加判断条件避免无意义执行：

useEffect(() => {
  // 仅当data和text都有值时才触发跳转
  if (data && text) {
    navigation.navigate('EnterAmount', {
      type: 'email',
      walletAddress: data,
      emailAddress: text,
    });
  }
}, [data, text, navigation]); // 依赖项需包含所有用到的状态和navigation对象

3. 排查状态闭环问题：检查data或text是否在跳转后被目标页面或其他逻辑意外修改，导致当前组件重新渲染并再次触发跳转，若存在这种情况，需要调整状态更新的逻辑，打断循环。

内容的提问来源于stack exchange，提问作者Arnav Jhajharia 10A