反应本机SetTimeOut

Question

我想在我的RN应用中使用计时器。 我想显示waiting...消息在列表视图的顶部。 在这种情况下，等待2.5秒钟将新项添加到列表中，同时向用户显示信息消息，然后等待1秒钟进行下一个循环，并且不显示waiting...消息。 我怎样才能做到这一点？ 我尝试了许多组合，但从未按预期进行。

render(){
        return (
          <View style={styles.container}>
            <Text style={styles.waiting}>
              {'waiting...'}
            </Text>
            <ListView
              dataSource={this.state.dataSource}
              renderRow={this.renderCell}
              automaticallyAdjustContentInsets={false}
              style={styles.listView}
              />
          </View>
        );
      }

Answer 1

如果我理解正确，请尝试以下代码。 希望这个帮助...

getInitialState: function() {
   return {
     showLoading : true,//To show 'Waiting Text in initial state.
   };
},

componentDidMount() {
   this.setTimeout( () => {
      this._hideLoadingView();//To hide 'Waiting' Text after 1 second
   },1000);
},

_hideLoadingView() {
   this.setState({
     showLoading: false, //set state to hide 'Waiting'
   });
},


render(){
    return (
      <View style={styles.container}>
        {this._loadingTextView()}
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderCell}
          automaticallyAdjustContentInsets={false}
          style={styles.listView}
          />
      </View>
    );
  },

_loadingTextView(){
  if(this.state.showLoading){//To show or hide 'Waiting'
  return( 
     <Text style={styles.waiting}>
     Waiting.....
     </Text>
   )
  }
}

Answer 2

Phyo几乎是正确的。 唯一的问题是它只会发生一次。 我不会在两者之间循环。 以下可能会解决问题

getInitialState: function() {
   return {
     showLoading : true,//To show 'Waiting Text in initial state.
   };
},

 componentWillMount() {
  this._showLoadingView; // start by displaying the wait
},

_hideLoadingView() {
   this.setTimeout(this._showLoadingView,1000);
   this.setState({
     showLoading: false, //set state to hide 'Waiting'
   });
},
_showLoadingView(){
   // Do other fetch instructions here
   this.setTimeout(this._hideLoadingView,2500);
   this.setState({
     showLoading: true,
   });
},
render(){
    return (
      <View style={styles.container}>
        {this.textRender()}
        <ListView
         dataSource={this.state.dataSource}
         renderRow={this.renderCell}
         automaticallyAdjustContentInsets={false}
         style={styles.listView}
         />
      </View>
    );
  },

textRender(){
  if(this.state.showLoading){//To show or hide 'Waiting'
      return( 
         <Text style={styles.waiting}>
             Waiting.....
         </Text>
       )
  }
  else{
      return <View />
  }

}

如果要使用this，请记住使用TimerMixin.setTimeout（推荐），否则请使用setTimeout