React-Native-Navigation TabNavigator 换屏功能？

Question

我在我的应用程序中使用 react-native-navigation 选项卡导航器，并且在我的一个屏幕上有一个可以播放音乐的按钮。但是，如果您按下按钮然后导航到另一个屏幕（使用标签栏），音乐将继续播放。我正在尝试找到一种方法让音乐在用户导航到另一个屏幕时停止。

是否有类似 componentDidUnmount() 方法的方法可以在屏幕变化时调用？

Answer 1

这里有两个选项（据我所知），都不是很好。

首先，您可以use Redux to to manage your navigator's state，当标签页发生变化时，听取变化，当相关标签页不再活动时，停止播放音乐。

其次，您可以尝试使用 onNavigationStateChange，但这对我来说真的很老套 - 我不确定它的实际效果如何。

Answer 2

从 v1.0.0-beta.28 开始，您现在可以在屏幕上订阅一些选项卡事件（willFocus、didFocus、willBlur、didBlur）：

componentDidMount() {
this._sub = this.props.navigation.addListener(
    'willFocus',
    this.yourCallback
  );
}

componentWillUnmount() {
  this._sub.remove();
}

此处有更多详细信息：https://github.com/react-navigation/react-navigation/pull/3345

React-Native-Navigation TabNavigator 换屏功能？

React-Native-Navigation TabNavigator screen change function?

navigation

tabnavigator

react-native