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.setTimeout（推荐），请记得使用TimerMixin，否则使用setTimeout

React Native SetTimeOut

2 个答案: