Отмена аудио при навигации с помощью StackNavigator - PullRequest
Новая
       24

Отмена аудио при навигации с помощью StackNavigator

0 голосов
/ 03 февраля 2020

Я использую react-navigation-stack в своем приложении React Native. Однако возникают проблемы с продолжением воспроизведения звука после того, как пользователь покидает текущий экран. Как отключить звук при переходе пользователя на другой экран в моем приложении?

У меня установлен StackNavigator следующим образом: 

//App.js
...
const MainNavigator = createStackNavigator({
    Main: {screen: Main},
    Song: {screen: Song},
    SongList: {screen: SongList},
    About: {screen: About}
})
...

На экране Song есть текст а также кнопку аудио. Когда пользователь нажимает кнопку звука, для него воспроизводится звук с использованием следующего кода: 

//Song.js
...
playAudio = (filepath) => {
    var s = new Sound('audio/' + filepath, Sound.MAIN_BUNDLE, (error) => {
        if (error){
             console.log('error', error)
        }
        else {
            s.play(()=>{
                s.release()
            })
        }
    })
}
...

Как видно, звук воспроизводится по окончании аудиофайла. Тем не менее, как я могу также установить его так, чтобы он прекращал воспроизведение (освобождается), когда пользователь уходит с текущей страницы?

1 Ответ

1 голос
/ 03 февраля 2020

Используйте addListener с "didBlur" и "didFocus", чтобы определить, когда пользователь покидает экран (открывает другой экран поверх него) и возвращается к нему. stop или pause звук при размытии, resume это в фокусе. И наконец, release звук (и удаление слушателей) на componentWillUnmount

добавленный пример 

class SongScreen extends React.Component {
  componentDidMount() {
    this.playAudio('some/filepath')
    this.didBlurSubscription = this.props.navigation.addListener(
      'didBlur',
      () => this.sound.pause()
    )
    this.didFocusSubscription = this.props.navigation.addListener(
      'didFocus',
      () => this.sound.play()
    )
  }

  componentWillUnmount() {
    this.didBlurSubscription.remove()
    this.didFocusSubscription.remove()
    this.sound.stop().release()
  }

  playAudio = (filepath) => {
    this.sound = new Sound('audio/' + filepath, Sound.MAIN_BUNDLE, (error) => {
      if (error) {
        console.log('error', error)
      } else {
        this.sound.play(() => {
          this.sound.release()
        })
      }
    })
  }
}
...