React Native Navigation 实现返回时刷新列表页面

实现逻辑基础 #

当前场景下从业务页面通过携带order_id、order_status参数跳转至订单列表页，要实现返回时列表自动刷新的效果，核心是利用导航框架自带的页面聚焦监听机制，替代组件挂载生命周期的触发时机——因为返回列表页时，列表组件本身不会重新挂载，原有的componentDidMount、useEffect只会在首次进入页面时执行，无法捕捉返回动作。

具体代码实现 #

类组件版本适配（React Navigation 5.x+） #

在订单列表页通过导航自带的监听API绑定页面聚焦事件，聚焦触发时执行列表数据拉取逻辑，同时在组件卸载时移除监听避免内存泄漏：

import React from 'react';
import { View, Text, FlatList } from 'react-native';

class OrderList extends React.Component {
  state = {
    orderList: []
  }

  componentDidMount() {
    // 绑定页面聚焦事件监听
    this.focusListener = this.props.navigation.addListener(
      'focus',
      this.triggerListRefresh
    )
  }

  componentWillUnmount() {
    // 组件销毁时移除监听
    if (this.focusListener) {
      this.focusListener.remove()
    }
  }

  // 触发列表刷新的核心方法
  triggerListRefresh = () => {
    // 读取路由携带的订单参数做列表筛选/数据拉取
    const { order_id, order_status } = this.props.route.params || {}
    this.fetchOrderList(order_id, order_status)
  }

  // 原有列表数据拉取逻辑
  fetchOrderList = async (orderId, orderStatus) => {
    // 实际项目中替换为接口请求逻辑
    const res = await mockApi.getOrderList({ orderId, orderStatus })
    this.setState({ orderList: res.data })
  }

  render() {
    return (
      <FlatList
        data={this.state.orderList}
        renderItem={({ item }) => <Text>{item.orderNo}</Text>}
      />
    )
  }
}

函数组件版本适配 #

使用导航官方提供的useFocusEffect钩子，简化监听绑定与销毁的逻辑，性能更优：

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

const OrderList = ({ route, navigation }) => {
  const [orderList, setOrderList] = React.useState([])

  // 列表数据拉取逻辑
  const fetchOrderList = async () => {
    const { order_id, order_status } = route.params || {}
    const res = await mockApi.getOrderList({ order_id, order_status })
    setOrderList(res.data)
  }

  // 页面聚焦时自动触发刷新
  useFocusEffect(
    React.useCallback(() => {
      fetchOrderList()
    }, [route.params?.order_id, route.params?.order_status])
  )

  return (
    <FlatList
      data={orderList}
      renderItem={({ item }) => <Text>{item.orderNo}</Text>}
    />
  )
}

优化注意点 #

• 不要仅依赖组件挂载生命周期做刷新：返回页面时组件不会重新挂载，挂载类生命周期不会重复执行，无法达到返回刷新的效果。
• 避免无意义的重复刷新：如果不需要页面每次聚焦都全量拉取数据，可以通过路由参数加标记的方式精准触发，比如只有从订单详情页返回时才刷新，刷新完成后通过navigation.setParams清空标记，防止后续非预期的聚焦动作重复触发请求。
• 不需要额外引入事件总线类库：导航自带的聚焦监听已经完全覆盖场景需求，可减少不必要的项目依赖。

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