Показывать тексты во время загрузки

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 и вызова setInterval в componentDidUpdate.Будьте осторожны при вызове здесь функции обновления, так как одна неправильная ошибка приведет к падению вашего приложения.

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

Я присоединяю рабочую выставку Демо для ясности.

Answer 2

То, что вы хотите, это показать 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"
  },
});