Question

我正在尝试返回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>
      )
    }
  }
}

谢谢您的帮助！

Answer 1

您可以做的是将文本保存在一个数组中，并使用一个变量来计算通过多少次。

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

Answer 2

我找到了解决方案，它在渲染中，你必须像这样：

  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>
      )

  }
}

有什么方法可以使用计时器setTimeout（）多次显示<text>吗？

2 个答案: