如何在反应原生导航 v5 中将数据传递回上一个屏幕？

Posted 2023-03-13

【中文标题】如何在反应原生导航 v5 中将数据传递回上一个屏幕？

【英文标题】：How to pass data back to previous screen in react native navigation v5?

【发布时间】：2020-06-14 21:51:06

【问题描述】：

我刚刚更新以响应本机导航版本 5。现在我正在尝试在 goBack() 调用时将数据发送回上一个屏幕。

我用

推送下一个视图

const onSelectCountry = item => 
    console.log(item);
;

navigation.navigate('SelectionScreen', 
        onSelect: onSelectCountry);

并在通过调用从 FlatList 中选择项目后返回：

function onSelectedItem(item) 
    route.params.onSelect(item);
    navigation.goBack();

但是通过使用参数发送函数我得到一个警告：在导航状态中发现了不可序列化的值...

谁能告诉我正确的方法。

【参考方案1】：

这是一个实现

屏幕A

const Screen1 = (navigation, route) => 
  const [item, setItem] = useState(null);

  useEffect(() => 
    navigation.addListener('focus', () => 
      console.log(route.params)
    )
  , [])  

  const onPress = () => 
    navigation.navigate('Screen2', onReturn: (item) => 
      setItem(item)
    )
  
  return (
    // Components
  )

屏幕2：

const Screen2 = (navigation, route) => 

  useEffect(() => 
    navigation.addListener('focus', () => 
      console.log(route.params)
    )
  , [])  

  // back Press
  const onPress = () => 
    route.params.onReturn(item);
    navigation.goBack()
  

  return (
    // Components
  )

【讨论】：

这是哪个版本，因为 route.params.onReturn(item);导致我出现描述“不是函数”的错误，而且我在文档中找不到任何关于它的内容？

反应导航 v5

onReturn 是发送给 screen2 的一个参数，它是一个函数

文档中没有

使用 navigation.navigate('SelectionScreen', onSelect: (item) => setItem(item));

【参考方案2】：

导航将数据发送到屏幕。

onPress=() => 
          // Pass params back to home screen
          navigation.navigate('Home',  post: postText );

关注官方文档React Native

【讨论】：

试图找到一种使用 goBack() 函数的方法，但看起来这是唯一的方法或使用全局状态（类似于 Redux），我不想这样做这种数据。无论如何，谢谢。

【参考方案3】：

我访问这篇文章是因为我想在 2 个堆栈中使用相同的通用组件。如何知道如何返回并传递参数？

我通过首先传递一个参数来解决它，该参数将识别从何处访问组件。 然后，我没有使用不接受参数的 goBack()，而是导航到上一个路由并传递参数。

//in Stack1
navigation.navigate('commonComponent', isStack1: true)

//in Stack2
navigation.navigate('commonComponent', isStack1: false)

//in CommonComponent, instead of goback(), use navivation.navigate

function CommonComponent( navigation, route ) 
  const isStack1 = route.params
  const customRoute = isStack1 ? 'routeNameInStack1' : 'routeNameInStack2'
  return (
    <Button title="Go back" onPress=() => navigation.navigate('customRoute', myParams: 'blabla...') />
  )