React Native Background Timer 在 x 时间后执行操作答案

【问题标题】：React Native Background Timer perform action after x timeReact Native Background Timer 在 x 时间后执行操作
【发布时间】：2018-08-21 19:02:49
【问题描述】：

我想创建一个关闭按钮，停止当前播放的歌曲并在指定的时间（比如说 5 分钟）后播放它我应该怎么做？这是我的代码：

  onPressButtonPlay() {
    if(song != null) {
        song.play((success) => {
            if(!success)
                ToastAndroid.show('Error when play SoundPlayer :(((', ToastAndroid.SHORT);
        });
    }   
  }


onPressButtonDismiss() {
    if(song != null) {
        song.stop((success) => {
            if(!success)
                ToastAndroid.show('Alarm dismissed', ToastAndroid.SHORT);
        });
    }   
  }

  onPressButtonStop() {
    if(song != null) {
        song.stop((success) => {
            if(!success)
                ToastAndroid.show('Alarm stopped', ToastAndroid.SHORT);
        });
    }   
  }  

  componentDidMount() {
   this.timeoutCheck = setTimeout(() => {
   this.setTimePassed();
   }, 400);
  }

  setTimePassed() {
   this.setState({timePassed: true});
  }

  onPressButtonTimer() {
  if (!this.state.timePassed){
      song.play();
    }
  }

【问题讨论】：

你在使用 redux 吗？
是的。所有模块都工作正常，只是不知道如何编写正确的代码。
我可以建议添加 redux-saga 并在那里处理计时器吗？他们有一个很好的延迟功能，您可以等待延迟，然后在时间过去后继续前进并调用下一个功能。
难道不能用后台定时器来做到这一点吗？如果没有，我的代码在使用 redux-saga 时应该是什么样子？
我从未使用过后台计时器，这看起来是一个有趣的解决方案。我认为这可能比我在我的应用程序上使用的 redux 架构更适合您构建它的方式。

标签： reactjs react-native timer background task

【解决方案1】：

我解决了我的问题！步骤如下：

首先创建函数，它会在指定的时间后（在这种情况下为一秒）播放警报/音乐：

var SoundPlayer = require('react-native-sound');

var song = null;

export default class App extends Component<{}> {

  PlaySongWithDelay=()=>{

    setTimeout(function(){

      //Put All Your Code Here, Which You Want To Execute After Some Delay Time.
      song.play()

    }, 1000);


  }

  componentWillMount() {
    song = new SoundPlayer('daydream.mp3', SoundPlayer.MAIN_BUNDLE, (error) => {
      if(error)
        ToastAndroid.show('Error when init SoundPlayer :(((', ToastAndroid.SHORT);
    });
  }

之后创建按钮。这是从上方播放歌曲的按钮的代码和停止它的代码：

  onPressButtonPlay() {
  if(song != null) {
    song.play((success) => {
      if(!success)
        ToastAndroid.show('Error when play SoundPlayer :(((', ToastAndroid.SHORT);
    });
  } 
  }

  onPressButtonDismiss() {
  if(song != null) {
    song.stop((success) => {
      if(!success)
        ToastAndroid.show('Alarm dismissed', ToastAndroid.SHORT);
    });
  } 
  }

这里是绑定两个动作（x时间后停止和播放）来创建双动作按钮的函数。

  onPressButtonStopAndDismiss(){
    this.onPressButtonDismiss();
    this.PlaySongWithDelay();

最后代码来渲染我们的按钮：

render() {
    return (
      <View style={styles.container}>
         <TouchableOpacity onPress={this.onPressButtonPlay.bind(this)}>
            <Text style={styles.buttonText}>Play</Text>
         </TouchableOpacity>

         <TouchableOpacity onPress={this.onPressButtonStopAndDismiss.bind(this)}>
            <Text style={styles.buttonText}>Dismiss</Text>
         </TouchableOpacity>
      </View>
    );
  }

我希望它会有所帮助;)

注意：将您的声音剪辑文件保存在android/app/src/main/res/raw目录下

【讨论】：

我无法在我的 react native 应用程序中制作睡眠计时器。如果用户设置 30 mins ，则应用程序应在 30 分钟后停止在后台播放音乐。它在 ios 中对我有效，但在 android 中无效。 :(