我们经常会有返回上一页并刷新上页数据的功能需求，比如在表单修改完数据再返回信息展示页。在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>
);
}
