更改选项卡时调用 class 方法

Question

我有以下选项卡导航结构：

tab1：声音播放器屏幕（您可以在其中播放声音），

tab2：信息屏幕，

tab3：设置屏幕，

当我从声音播放器选项卡切换到信息或设置选项卡时，我希望声音播放器停止播放（class 有 stop() 方法）。我试过使用 tabBarOnPress，但我真的不明白如何从那里调用停止方法。我试过这样的东西：

static navigationOptions = {
    tabBarOnPress: ({previousScene,scene,jumpToIndex}) => {
        previousScene.stop();
        jumpToIndex(scene.index);
    }
}

Answer 1

使用 react-navigation 实现这一点出奇地困难，因为事实证明要知道哪个屏幕当前具有库的当前状态的焦点非常棘手（请参阅长篇文章 here） .

一种解决方案是使用 react-navigation-is-focused-hoc，它包装您的屏幕组件，在 props 中提供一个您可以检查的布尔值。鉴于此，您可以在 tab1:

的 componentWillUpdate 中添加类似以下内容

componentWillUpdate (nextProps) {
  if (!nextProps.isFocused) {
    // component is going out of focus, stop the music
    this.stop()
  }
}

注意：我建议使用我链接的库的版本，它是 Patrick Wozniak 的分支，它稍微更新一些。

更改选项卡时调用 class 方法

Calling class method, when changing tab

tabbar

react-native

react-navigation