React Native（v6）：导航返回时触发列表页重渲染的方法

方案一：监听页面焦点事件重新拉取数据 #

在列表类组件中，通过React Navigation的navigation.addListener监听focus事件，每次页面获得焦点时重新获取最新数据并更新状态：

class ProfileList extends React.Component {
  componentDidMount() {
    // 订阅focus事件
    this._focusListener = this.props.navigation.addListener('focus', () => {
      this.fetchLatestProfiles();
    });
  }

  componentWillUnmount() {
    // 取消订阅，避免内存泄漏
    this._focusListener();
  }

  fetchLatestProfiles = async () => {
    // 从API或本地存储获取最新用户资料
    const latestProfiles = await yourApi.fetchUserProfiles();
    this.setState({ profiles: latestProfiles });
  }

  render() {
    return (
      <FlatList
        data={this.state.profiles}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('EditProfile', { profile: item })}
          >
            <Text>{item.name}</Text>
          </TouchableOpacity>
        )}
      />
    );
  }
}

方案二：编辑页面返回时传递更新数据，列表页面接收更新 #

编辑页面完成更新后，将修改后的资料数据通过navigate传递回列表页面，列表页面在componentDidUpdate中检测参数变化并更新本地状态：

编辑页面代码： #

class EditProfile extends React.Component {
  handleSubmit = async () => {
    const { profile } = this.props.route.params;
    // 提交更新请求
    const updatedProfile = await yourApi.updateProfile({
      ...profile,
      ...this.state.formData
    });
    // 返回列表页面并携带更新后的数据
    this.props.navigation.navigate('ProfileList', { updatedProfile });
  }

  // 渲染编辑表单...
}

列表页面代码： #

class ProfileList extends React.Component {
  componentDidUpdate(prevProps) {
    // 检查是否有新的更新数据传入
    const prevUpdatedProfile = prevProps.route.params?.updatedProfile;
    const currentUpdatedProfile = this.props.route.params?.updatedProfile;
    
    if (prevUpdatedProfile !== currentUpdatedProfile && currentUpdatedProfile) {
      // 更新列表中的对应条目
      this.setState(prevState => ({
        profiles: prevState.profiles.map(item => 
          item.id === currentUpdatedProfile.id ? currentUpdatedProfile : item
        )
      }));
      // 清除参数，避免重复触发更新
      this.props.navigation.setParams({ updatedProfile: null });
    }
  }

  // 初始化数据获取和列表渲染...
}

方案三：使用全局状态管理（Context） #

通过React Context统一维护用户资料数据，编辑页面更新全局状态后，列表页面作为状态消费者会自动重新渲染：

1. 创建全局状态Context #

import React from 'react';

const ProfileContext = React.createContext();

export const ProfileProvider = ({ children }) => {
  const [profiles, setProfiles] = React.useState([]);

  // 更新单个资料的方法
  const updateProfile = (updatedProfile) => {
    setProfiles(prev => prev.map(item => 
      item.id === updatedProfile.id ? updatedProfile : item
    ));
  };

  // 初始化获取数据的方法
  const fetchProfiles = async () => {
    const data = await yourApi.fetchUserProfiles();
    setProfiles(data);
  };

  return (
    <ProfileContext.Provider value={{ profiles, updateProfile, fetchProfiles }}>
      {children}
    </ProfileContext.Provider>
  );
};

2. 列表页面订阅Context #

import { ProfileContext } from './ProfileContext';

class ProfileList extends React.Component {
  static contextType = ProfileContext;

  componentDidMount() {
    // 初始化获取数据
    this.context.fetchProfiles();
  }

  render() {
    const { profiles } = this.context;
    return (
      <FlatList
        data={profiles}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('EditProfile', { profile: item })}
          >
            <Text>{item.name}</Text>
          </TouchableOpacity>
        )}
      />
    );
  }
}

3. 编辑页面更新全局状态 #

import { ProfileContext } from './ProfileContext';

class EditProfile extends React.Component {
  static contextType = ProfileContext;

  handleSubmit = async () => {
    const { profile } = this.props.route.params;
    const updatedProfile = await yourApi.updateProfile({
      ...profile,
      ...this.state.formData
    });
    // 更新全局状态
    this.context.updateProfile(updatedProfile);
    // 返回列表页面
    this.props.navigation.goBack();
  }

  // 渲染编辑表单...
}

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