在 RemaxJs 中实现 useShowFromNavigateBack

需求

在 pageA 跳转到 pageB 后，用户在 pageB 中一顿操作，navigateBack 回来后我们需要发起请求验证操作状态。

实现

那么我们如何知道用户返回了 pageA 呢，直接使用 useShow 会有一些问题，因为这个 api 在其他情况下也会触发（比如用户进入 app）。

所以我们需要增加一些判断，在用户跳转到 pageB 后，pageA 显示了，那就说明 pageB 销毁了。

以下代码是完整的实现：

import { useRef } from 'react'
import { nextTick, useHide, useShow } from 'remax/wechat'

export function useShowFromBack(callback: () => void) {
  // 当前页面的索引
  const pageIdx = useMemo(() => getCurrentPages().length, [])
  // 是否已跳转
  const navigated = useRef(false)

  useHide(() => {
    // 此时新页面还未建立，需要 nextTick 后再获取
    nextTick(() => {
      if (getCurrentPages().length > pageIdx) {
        // 新增了页面，说明跳转到新页面了
        navigated.current = true
      }
    })
  })

  useShow(() => {
    if (!navigated.current) return
    // 已经跳转了但当前页面显示了，说明返回到此页面了
    navigated.current = false
    callback()
  })
}