Есть ли способ отобразить <Text>с помощью таймера setTimeout () несколько раз? - PullRequest
Новая
       14

Есть ли способ отобразить <Text>с помощью таймера setTimeout () несколько раз?

0 голосов
/ 22 мая 2019

Я пытаюсь вернуть 9 разных текстов с 5-секундной задержкой между каждым, но это работает только для первого текста

я пробовал использовать 

  render() {
    setTimeout(() => {this.setState({timePassed: true})}, 2000);
    if(this.state.timePassed == false){
      return (
        <Text></Text>
      )
    }else if (this.state.timePassed == true{
      return(
        <Text>HELLO</Text>
      )
    }else if (this.state.timePassed1 == false{
............
  }
}

но не работает Я также пытался 

  componentDidUpdate(){
    setTimeout(() => {this.setState({timePassed1: true})}, 4000);
    if(this.state.timePassed1 == true){
      return(
      <Text>test</Text>)
    }
}

но не работает

Вот мой экран 

export default class Internet2 extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      timePassed: false,
      timePassed1: false
    };
  }

  componentDidUpdate(){
    setTimeout(() => {this.setState({timePassed1: true})}, 4000);
    if(this.state.timePassed1 == true){
      return(
      <Text>test</Text>)
    }
}

  render() {
    setTimeout(() => {this.setState({timePassed: true})}, 2000);
    if(this.state.timePassed == false){
      return (
        <Text></Text>
      )
    }else{
      return(
        <Text>HELLO</Text>
      )
    }
  }
}

Спасибо за вашу помощь!

Ответы [ 2 ]

1 голос
/ 22 мая 2019

Что вы можете сделать, это сохранить текст в массиве и переменной для подсчета, сколько раз он прошел. 

state = {
    texts = ['sometext', ...]
    textCount = 0
}

Затем вы создадите setInterval для цикла в нужное время 

componentDidMount() {
    let timer = setInterval(() => {
        this.setState(prevState => {
            return {textCount: prevState.textCount + 1}
        })
        if (this.state.textCount > this.state.texts.length) clearInterval(timer);
    }, theTimeYouWant);
}

и визуализировать тексты, используя .map

  render() {
      return (
        <View>
            {this.state.texts.map((text, i) => i <= this.state.textCount ?
               <Text>{text}</Text> : null
            )}
        </View>
      )
  }
0 голосов
/ 22 мая 2019

Я нашел решение, оно в рендере, и вы должны идти как: 

  constructor(props){
    super(props);
    this.state = {
      timePassed: false,
      timePassed1: false
    };
  }

  render() {
    setTimeout(() => {this.setState({timePassed: true})}, 2000);
    setTimeout(() => {this.setState({timePassed1: true})}, 3000);
      return (
        <View>
        {this.state.timePassed == true ? (<Text>INTERNET</Text>) : null}
        {this.state.timePassed1 == true ? (<Text>TEST</Text>) : null}
        </View>
      )

  }
}
...