Как показать прогресс загрузки или счетчик в середине экрана с React Native?

Question

Я занимаюсь разработкой приложения React Native.

Я смог решить все проблемы самостоятельно, но это исключение. Я собираюсь загрузить другой экран с навигатором нижней вкладки.

Например, после входа пользователя в приложение должно отображаться главный домашний экран, на котором много картинок и много эффектов таблиц стилей, значки. Из-за этого, после подтверждения входа в систему (я имею в виду после оповещения о подтверждении входа в систему), через несколько секунд появляется главный домашний экран.

Поэтому я хочу, чтобы при загрузке основного домашнего экрана отображался какой-то счетчик на экране входа в систему. на заднем плане и когда он будет готов к показу, сотрите спиннер и покажите главный домашний экран. Как я могу это сделать?

Мой навигатор на нижней вкладке был просто создан методом createBottomTabNavigator().

Answer 1

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

    import React, {useEffect, useState} from 'react';
import {ActivityIndicator, View, Dimensions} from 'react-native';
import HomeScreen from './Home';

const DataViewer = () => {
  const [data, setData] = useState([]);
  const {height, width} = Dimensions.get('window');
  useEffect(() => {
    fetch('http://example.com/movies.json')
      .then(response => {
        return response.json();
      })
      .then(myJson => {
        setData(myJson);
      });
  });

  return data.length > 0 ? (
    <HomeScreen data={data} />
  ) : (
    <View
      style={{justifyContent: 'center', alignItems: 'center', height, width}}>
      <ActivityIndicator size="large" color="#0000ff" />
    </View>
  );
};

export default DataViewer;

Answer 2

Я создал свой пользовательский компонент Loader. С его помощью вы можете отобразить встроенный ActivityIndicator или ваше пользовательское изображение gif-загрузчика с наложением.

Loader. js

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Modal,
  Image,
  ActivityIndicator
} from 'react-native';
import Colors from '../../config/Colors';

class Loader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: this.props.isLoading
    }
  }

  static getDerivedStateFromProps(nextProps) {
    return {
      isLoading: nextProps.isLoading
    };
  }

  render() {
    return (
      <Modal
        transparent={true}
        animationType={'none'}
        visible={this.state.isLoading}
        style={{ zIndex: 1100 }}
        onRequestClose={() => { }}>
        <View style={styles.modalBackground}>
          <View style={styles.activityIndicatorWrapper}>
            <ActivityIndicator animating={this.state.loading} color={Colors.primary} />

            {/* If you want to image set source here */}
            {/* <Image
              source={require('../assets/images/loader.gif')}
              style={{ height: 80, width: 80 }}
              resizeMode="contain"
              resizeMethod="resize"
            /> */}
          </View>
        </View>
      </Modal>
    )
  }
}

const styles = StyleSheet.create({
  modalBackground: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'space-around',
    backgroundColor: '#rgba(0, 0, 0, 0.5)',
    zIndex: 1000
  },
  activityIndicatorWrapper: {
    backgroundColor: '#FFFFFF',
    height: 100,
    width: 100,
    borderRadius: 10,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-around'
  }
});

export default Loader

Теперь вы можете использовать его, когда вы должен отображать индикатор загрузки, как показано ниже:

<Loader isLoading={this.state.isLoading} />

Answer 3

Таким образом, вы можете показать SPinner для предположения, когда вам нужно загрузить API или что-то еще, и когда вы получите ответ api, вы можете установить значение загрузки счетчика в false.

Например:

import {View, ActivityIndicator } from 'react-native';

export default class MainScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            spinner : true
        }
    }

componentDidMount(){
this.loadApi();
}

loadApi = async() => {
let result = axios.get('url').then((data) =>{
this.setState({spinner:false});
}
).catch((err) => this.setState({spinner:false})
}

    render() {
        return (
        <View style={{flex : 1, justifyContent: 'center', alignItems: 'center',}}>
        {
          this.state.spinner? <ActivityIndicator  color={'#fff'} />:<View><Text>Data loaded</Text></View>

        }
        </View>
        )
    }
}

Answer 4

Так что в вашем случае вы можете сделать несколько вещей

1. Вы можете использовать React Native Activity Indicator -> View
2. Вы можете использовать Overlay Library -> response-native-loading-spinner-overlay -> Просмотр GitHub
3. Если вы хотите сделать загрузку как facebook / instagram ->, тогда используйте response-native-easy-content-loader -> View GitHub

Предположим, вы используете React Native Activity Indicator:

import { ActivityIndicator } from "react-native";

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

  //Get Home Screen Data API Action
  componentDidMount() {
    this.loadAPI(); // Call home screen get data API function
  }

  //Login API Function
  loadAPI = () => {
    this.setState({ isLoading: true }); // Once You Call the API Action loading will be true
    fetch(API_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      }
    })
      .then(response => response.json())
      .then(responseText => {
        // You can do anything accroding to your API response
        this.setState({ isLoading: false }); // After getting response make loading to false
      })
      .catch(error => {});
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        {this.state.isLoading && <ActivityIndicator color={"#fff"} />}
      </View>
    );
  }
}

• Если вы хотите скрыть все представления до полной загрузки sh как изображения, так что вы можете использовать пользовательскую библиотеку вместо индикатора активности.

Answer 5

import { ActivityIndicator } from 'react-native';

export default class LoginScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            spinner : true
        }
    }
    render() {
        return (
        <View style={{flex : 1, justifyContent: 'center', alignItems: 'center',}}>
        {
          this.state.spinner &&
          <ActivityIndicator  color={'#fff'} />
        }
        </View>
        )
    }
}