反应本机SetTimeOut

Question

I want to use timer within my RN apps. I want to show waiting... message top of the list view. Here is the scenario, wait 2.5 second for adding new item to list, at the same time show info message to user, then wait 1 seconds for next cycle and don't show waiting... message. How can I do this? I tried many combination but it never works as expected.

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

If I understand correctly, give it a try this code. Hope this help...

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 is almost right. The only problem being that it will happpen only once. I will not cycle between the two. The following might get the trick done

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 />
  }

}

Remember to use the TimerMixin if you want to use this.setTimeout (recommended) else use setTimeout