React Native：组件解构navigation时，如何获取跳转传递的参数

当组件已经解构navigation时，有两种常用方式获取传递的data参数：

方法1：同时解构route props #

React Navigation会给屏幕组件传递navigation和route两个核心props，你可以在组件参数里同时解构出route，直接通过它获取参数：

export default function ScreenName({ navigation, route }) {
   // 建议添加可选链避免参数不存在时报错
   const data = route.params?.data;
}

方法2：使用useRoute钩子 #

如果不想在组件参数里解构route，可以导入并使用useRoute钩子来获取路由信息：

import { useNavigation, useRoute } from '@react-navigation/native';

export default function ScreenName({ navigation }) {
   const route = useRoute();
   // 同样建议添加可选链处理参数缺失的情况
   const data = route.params?.data;
}

注意：如果传递的参数可能不存在，一定要用可选链操作符?.或者设置默认值（比如route.params?.data || {}），防止出现Cannot read properties of undefined的错误。

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