React-Native-Navigation TabNavigator屏幕更改功能？

Question

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

当屏幕发生变化时，是否有类似于componentDidUnmount（）方法的内容？

Answer 1

从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

Answer 2

这里有两个选项（我很清楚），也不是很好。

首先，你可以use Redux to to manage your navigator's state，当标签发生变化时，听取这个变化，当相关标签不再有效时，停止播放音乐。

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