javascript - 加载期间显示文本

Question

我有一个问题。我有一个加载程序，在加载过程中我会显示三个不同的文本。就像text1一样，然后它消失并显示text2，然后是text3。

<View style={style.container}>
        <View style={style.page}>
          <ActivityIndicator size="large" color="#56cbbe" />
          <Text>Text1.. </Text> 
          <Text>Text2.. </Text> 
          <Text>Text3.. </Text>
        </View>
</View> 

在本例中，我仅将三个文本一起显示。我能怎么做？

谢谢:)

Answer 1

解决此问题的一种方法是使用 setInterval 并调用更新函数来循环文本，假设它们是否以数组形式存在。

简单说一下。

让我们将loadingText的状态保持为loadingText:['text1'，'text2'，'text3']，用于跟踪当前项目的变量为currentLoadingTextIndex:0并在componentDidUpdate中调用setInterval。在这里调用更新函数时要小心，因为一个错误就会导致您的应用程序崩溃。

componentDidUpdate(prevProps, prevState) {
    if (!prevState.isLoading && this.state.isLoading) {
      this.timerId = setInterval(this.changeLoadText, 2000);
    } else if (prevState.isLoading && !this.state.isLoading) {
      clearInterval(this.timerId);
    }
  }

最后是我们的更新函数

changeLoadText = () => {
    this.setState(prevState => {
      return {
        currentLoadingTextIndex:
          (prevState.currentLoadingTextIndex + 1) %
          prevState.loadingText.length,
      };
    });
  };

我正在附上工作博览会Demo为了清楚起见。