在加载过程中显示文本

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

您想要的是在加载期间显示indicator和text1 ，然后显示text2和text3 。 那正确吗？

所以我给你做了一个例子。 这应该通过更改status值来解决问题。 您可以显示加载持续时间的indicator ，并通过在加载完成时更改status值来显示文本。

示例代码

//This is an example code to understand ActivityIndicator//

import React from 'react';
//import react in our code.

import { ActivityIndicator, Button, View, StyleSheet,Text } from 'react-native';
//import all the components we are going to use.

export default class App extends React.Component {
  state = { showIndicator: true };

  componentDidMount() {
     setTimeout(() => {this.setState({showIndicator: false})}, 2000)
  }

  onButtonPress = () => {
    //function to change the state to true to view activity indicator
    //changing state will re-render the view and indicator will appear
  };

  render() {
    //Check if showIndicator state is true the show indicator if not show button
    if (this.state.showIndicator) {
      return (
        <View style={styles.container}>
          {/*Code to show Activity Indicator*/}
          <ActivityIndicator size="large" color="#0000ff" />
                    <Text>Text1.. </Text> 
          {/*Size can be large/ small*/}
        </View>
      );
    } else {
      return (
        <View style={styles.container}>
           <Text>Text2.. </Text> 
          <Text>Text3.. </Text>
        </View>
      );
    }
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    flexDirection: 'column',
    alignItems: "center"
  },
});

Answer 2

解决这个问题的一种方法是使用 setInterval 并调用 update function 来循环遍历文本，假设它们是否以数组的形式存在。

简单说一下。

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

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

最后是我们的更新 function

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

为了清楚起见，我附上了一个有效的 expo演示。