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

} 

Не забывайте использовать TimerMixin, если вы хотите использовать this.setTimeout (рекомендуется) еще использовать SetTimeout