【问题标题】:passing react navigation goBack as reference传递反应导航 goBack 作为参考
【发布时间】:2017-08-09 18:58:23
【问题描述】:

因此,当我尝试将 goBack 函数作为引用传递时,由于某种原因它不起作用,我需要将其封装为匿名函数才能使其工作。这是有原因的吗?

我想让它工作! (下)

<Button onPress={this.props.navigation.goBack} />

但只有这个有效(下)

<Button onPress={() => this.props.navigation.goBack()} />

this 失去了它的引用吗?谢谢!

编辑:我注意到该文档还使用匿名函数来调用goBack。很好奇为什么会这样。

【问题讨论】:

  • 粗箭头保留this 上下文。

标签: javascript react-native react-navigation


【解决方案1】:

&lt;Button onPress={this.props.navigation.goBack} /&gt; 不起作用的原因是 goBack 期望 nullundefined 作为第一个参数,以具有仅返回一个屏幕的默认行为。

当您使用像 onPress={this.props.navigation.goBack} 这样的处理程序时,处理程序将调用 goBack 处理程序传回的事件,即this.props.navigation.goBack(event)

event 不为空,因此goBack 函数将尝试将其作为屏幕键传递给goBackhttps://reactnavigation.org/docs/navigators/navigation-prop#goBack-Close-the-active-screen-and-move-back。然后,event 不匹配任何你预定义的键,所以路由没有效果。

【讨论】:

  • 没问题。很高兴为您提供帮助!
  • 很遗憾他们没有在文档中提到goBack 期待undefined
【解决方案2】:

是的,这很可能是您的问题。

试试:&lt;Button onPress={this.props.navigation.goBack.bind(this)} /&gt;

有关整体方法/更简洁的代码,请参阅文档中的这一点:

https://facebook.github.io/react/docs/handling-events.html

【讨论】:

  • 我认为goBack本身就是一个箭头函数,因此不能反弹到一个新的this
  • 是的,我也这么认为^。您可以创建一个引用匿名函数的变量,并将该函数作为this.foo 传递,它会被正确调用。
猜你喜欢
  • 1970-01-01
  • 2019-06-11
  • 2020-11-26
  • 1970-01-01
  • 1970-01-01
  • 2017-10-28
  • 1970-01-01
  • 1970-01-01
  • 2022-08-16
相关资源
最近更新 更多