React Navigation 5.x goBack 返回并刷

我们经常会有返回上一页并刷新上页数据的功能需求，比如在表单修改完数据再返回信息展示页。在React Native结合React Navigation 5.x开发的应用中，我们可以这样实现：

A页面跳转B页面时，在params加上一个值为更新A页面方法的参数：navigation.navigate('A', { update: () => updateFun()}) }
要从B页面返回A页面时，先从路由参数中获取这个方法并执行，再返回。
route.params.update()
navigation.goBack()

简单示例如下：

这是信息展示页 UserCenter

// 用户信息展示页
import React from 'react'
import { View, Button } from 'react-native'

const UserCenter = (props) => {
  const updateData = () => {
    // ... 这里写更新页面的逻辑，比如重新请求
    console.warn('更新数据啦')
  }
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="去用户编辑页"
        onPress={() => props.navigation.navigate('UserEdit', {update: updateData})}
      />
    </View>
}
export default UserCenter

这是信息编辑页 UserEdit

// 用户信息编辑页
import React from 'react'
import { View, Button, Alert } from 'react-native'
import { editUser } from '@api/user'

const UserEdit = (props) => {
  // 组件状态信息省略
  const [editInfo, setEditInfo] = useState({......})

  const submitEdit = async () => {
    // 具体提交请求省略
    const result = await editUser(userId, editInfo)
    if(result.code === 200) {
      Alert.alert(result.message)
      // 路由参数 update 的值即是在 UserCenter 组件中定义的 updateData 方法，我们直接执行它
      route.params.update() 
      navigation.goBack() // 返回上一页
    }
  }
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="确认修改"
        onPress={submitEdit}
      />
    </View>
}
export default UserEdit

注意：在路由参数内传递不可序列化的值(如实例、函数等)会报一个警告⚠️：Non-serializable values were found in the navigation state，因为这可能会破坏其他功能，例如状态持久性，深层链接等。

如果你不使用状态持久性或不使用接受参数形式的屏幕的深层链接，则可以放心地忽略它。

或者我们安全起见用以下方法：官网链接🔗：传递参数到上一个屏幕
如果目标屏幕已经存在于历史记录中，我们要实现返回并传参可以使用navigate来代替goBack。这种情况navigate和goBack的作用是一样的。

为什么它俩可以一样呢？
顺便加深理解下navigate和push的区别：使用navigate导航到一个已经存在于历史记录的屏幕的效果是：返回到这个屏幕并删除在这屏之后的所有记录。navigate永远不会重复推送相同的屏幕到历史记录里。要实现重复推送，例如传不同id就表示不同屏幕的详情页组件，我们导航的时候必须要用push。

import React, { useEffect } from 'react'
import { View, Button } from 'react-native'

function UserCenter({ navigation, route }) {
  useEffect(() => {
    if (route.params?.refresh) {
      // 如果拿到了更新参数，即表示需要刷新
      // 这里书写更新逻辑
      console.warn(route.params.refresh)
    }
  }, [route.params?.refresh])

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="去用户编辑页"
        onPress={() => navigation.navigate('UserEdit')}
      />
    </View>
  );
}

function UserEdit({ navigation, route }) {
  // 组件状态信息省略
  const [editInfo, setEditInfo] = useState({......})

  const submitEdit = async () => {
    // 具体提交请求省略
    const result = await editUser(userId, editInfo)
    if(result.code === 200) {
      Alert.alert(result.message)
      // 传递个表示要刷新的路由参数即可，为了参数每次变化，我们传个随机数 
      navigation.navigate('User', { refresh: Math.random() })
    }
  }
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="确认修改"
        onPress={submitEdit}
      />
    </View>
  );
}