web-dev-qa-db-ja.com

es6を使用して、react nativeでタイマーを作成する

リアクションネイティブを使用して構築されたアプリにタイマーを追加しようとしています。

ドキュメントで timer mixin へのリンクを確認しましたが、es6を使用して残りのアプリをビルドしているため、互換性がありません。

以下を試しました。

私のメインクラスにはgetTimerCountDownという関数があります

getTimerCountDown() {
    setTimeout(() => {
      this.setTimeRemaining(this.getTimeRem()-1);
    }, 1000);
}

getTimeRem() {
    return this.state.timeRemaining;
}

以下に示すように、componentDidUpdateでこれを呼び出してみました。これは、UIで他の操作を行わない限り、思いどおりに機能します。

私が行う場合（たとえば、ボタンをクリックすると、ビューをクリックできるようになります）。`componentDidUpdateが再度呼び出されると、（x回呼び出されるので）conunterが非常に速くなります。

componentDidUpdate(){
    this.getTimerCountDown();
}

ここで間違ったトラックに完全に進んでいるのか、それとも自分が行ったことに少し変更を加えるだけで自分が望むものを手に入れることができるのかわかりません。 es6を使用してリアクションネイティブでカウントダウンタイマーを機能させる最良の方法は何ですか？

メインページのタイマークラス

<Timer timeRem={this.getTimeRem()} />

戻り値

render(){
    return (
        <View style={styles.container}>
            <Text> This is the Timer : {this.props.setTimer}  - {this.props.timeRem} </Text>
        </View>
    )
}
javascriptiosfacebookreactjsreact-native
11
ak85

他のUIインタラクションがない場合でも、それがどのように機能するかは本当にわかりません。 componentDidUpdateは、コンポーネントが再レンダリングされるたびに呼び出されます。これは、内部状態または受け渡された小道具が変更されたときに発生します。毎秒正確に発生するとは言えません。

getTimerCountDownをcomponentDidMountメソッド（一度だけ呼び出される）に移動し、setIntervalの代わりにsetTimeoutを使用して、カウンターが継続的に減少しましたか？

5
tkers

ちょっと遅くなりましたが、タイマーとes6コンポーネントを反応ネイティブで処理するために作成したこのコンポーネントを試すことができます。

https://github.com/fractaltech/react-native-timer

アイデアは単純で、コンポーネントのタイマー変数を維持およびクリアするのは面倒なので、単純に、それらを別のモジュールで維持します。例：

// not using ES6 modules as babel has broken interop with commonjs for defaults 
const timer = require('react-native-timer');

// timers maintained in the Map timer.timeouts 
timer.setTimeout(name, fn, interval);
timer.clearTimeout(name);

// timers maintained in the Map timer.intervals 
timer.setInterval(name, fn, interval);
timer.clearInterval(name);

// timers maintained in the Map timer.immediates 
timer.setImmediate(name, fn);
timer.clearImmediate(name);

// timers maintained in the Map timer.animationFrames 
timer.requestAnimationFrame(name, fn);
timer.cancelAnimationFrame(name);
4
kapv89

これを試して

Timer.js

import React, { Component } from "react";
import { View,Text,Button,StyleSheet } from "react-native";
const timer = () => {};
class Timer extends Component {
    constructor(props) {
    super(props);
    this.state = {
      remainingTime: 10
     };
    }

 countdownTimer(){
   this.setState({remainingTime:10 });
   clearInterval(timer);
   timer = setInterval(() =>{
        if(!this.state.remainingTime){
          clearInterval(timer);
          return false;
        }
        this.setState(prevState =>{
        return {remainingTime: prevState.remainingTime - 1}});
        },1000);
    }

    render() {
      return (
       <View style={styles.container}>
         <Text>Remaining time :{this.state.remainingTime}</Text>
          <Button title ="Start timer" onPress={()=>this.countdownTimer()}/>
       </View>
     );
   }
  }


  const styles = StyleSheet.create({
    container:{
     flex:1,
     justifyContent:'center',
     alignItems:'center',
   } 
});

  export default Timer;

App.js

import React, { Component } from "react";
  import { View,Text,Button,StyleSheet } from "react-native";
  import Timer from './timer';

  export default class App extends Component{
   render(
    return (<Timer />)
   );
 }
2
Akash sharma