React Navigation中navigation.state.params参数更新检测问题

这问题我之前也碰到过！React Navigation的页面缓存机制在这里坑了不少人，我来给你捋清楚怎么解决～

问题根源 #

React Navigation 默认会缓存已经创建过的页面组件实例。当你从不同子菜单跳转到同一个 Category 页面时，它不会重新创建新的组件，而是复用之前的实例。这就导致 this.props.navigation.state.params 不会自动更新——因为组件没有重新挂载，初始化逻辑只会执行一次。

解决方案 #

根据你用的是类组件还是函数组件，有不同的处理方式：

如果你用的是类组件 #

方法1：用 componentDidUpdate 监听参数变化

在组件的生命周期里，对比前后的 navigation 参数，一旦发现变化就更新数据：

class CategoryScreen extends React.Component {
  state = {
    currentSubmenuId: null,
    currentSubmenuTitle: ''
  };

  componentDidMount() {
    // 首次进入时初始化数据
    const { submenu } = this.props.navigation.state.params;
    this.updateSubmenuData(submenu);
  }

  componentDidUpdate(prevProps) {
    // 检查参数是否发生变化
    if (prevProps.navigation.state.params !== this.props.navigation.state.params) {
      const { submenu } = this.props.navigation.state.params;
      this.updateSubmenuData(submenu);
    }
  }

  updateSubmenuData = (submenu) => {
    this.setState({
      currentSubmenuId: submenu.id,
      currentSubmenuTitle: submenu.title
    });
  };

  render() {
    // 使用 this.state 里的渲染数据
    return (
      <View>
        <Text>{this.state.currentSubmenuTitle}</Text>
      </View>
    );
  }
}

方法2：监听页面焦点事件

用 navigation.addListener 监听 didFocus 事件，每次页面获得焦点时都重新读取参数：

class CategoryScreen extends React.Component {
  state = {
    currentSubmenuId: null,
    currentSubmenuTitle: ''
  };

  componentDidMount() {
    // 注册焦点监听
    this._focusListener = this.props.navigation.addListener('didFocus', () => {
      const { submenu } = this.props.navigation.state.params;
      this.setState({
        currentSubmenuId: submenu.id,
        currentSubmenuTitle: submenu.title
      });
    });
  }

  componentWillUnmount() {
    // 记得移除监听，避免内存泄漏
    this._focusListener.remove();
  }

  render() {
    return (
      <View>
        <Text>{this.state.currentSubmenuTitle}</Text>
      </View>
    );
  }
}

如果你用的是函数组件（React Hooks） #

使用 React Navigation 提供的 useFocusEffect 钩子，专门处理页面焦点变化的副作用：

import { useFocusEffect } from '@react-navigation/native';
import { useState } from 'react';
import { View, Text } from 'react-native';

function CategoryScreen({ route }) {
  const [currentSubmenu, setCurrentSubmenu] = useState(route.params.submenu);

  useFocusEffect(
    React.useCallback(() => {
      // 每次页面聚焦时更新参数
      setCurrentSubmenu(route.params.submenu);
    }, [route.params.submenu])
  );

  return (
    <View>
      <Text>{currentSubmenu.title}</Text>
    </View>
  );
}

额外提示 #

别用 navigation.push 代替 navigate，虽然这样会创建新的页面实例能拿到新参数，但会导致页面栈不断堆积，用户返回时要多次返回，体验不好。上面的监听方法才是更合理的解决方案。

内容的提问来源于stack exchange，提问作者Marcelo Tardelli Magalhães