ahmadajah03 Wed Dec 2020 1 year ago

React Native ActivityIndicator untuk Animasi Pemuatan Cepat & Mudah

Jika Anda perlu menyiapkan animasi pemuatan cepat, gunakan React Native ActivityIndicator !

Kami akan menggunakan ActivityIndicator dan Modal React Native untuk membuat animasi pemuatan sederhana. Ini adalah produk akhir kami (ditampilkan di simulator iOS).

Saya menggunakan Google Maps API untuk meminta alamat, tetapi ini sangat cepat, jadi saya juga menggunakan waktu tunggu untuk memberi kami lebih banyak waktu untuk melihat animasi pemuatan.

Komponen Presentasional - Loader

Mari kita mulai dengan membuat pr kami e sentational komponen file. Saya menyebut milik saya loader.js. Saat saya membuat komponen presentasi, saya ingin segera mengimpornya ke layar atau komponen penampung juga sehingga saya dapat melihat perubahan seiring berjalannya waktu. Awal awal komponen Loader saya terlihat seperti ini.

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Modal,
  ActivityIndicator
} from 'react-native';
const Loader = props => {
  const {
    loading,
    ...attributes
  } = props;
return (
    <Modal
      visible={loading}></Modal>
  )
}
const styles = StyleSheet.create({

});
export default Loader;

React Native Modal

Penampung pemuat saya akan menjadi modal layar penuh karena saya tidak ingin pengguna dapat melakukan tindakan apa pun di layar saat data saya dimuat. Jadi saya dapat melanjutkan dan menambahkannya sebagai satu-satunya markup saya untuk saat ini. Di dokumen Modal dari React Native , Anda dapat melihat mereka memberi kami properti yang terlihat ini yang akan ditampilkan dan disembunyikan sesuai kebutuhan.

Hebat - jadi ini memberi kita sesuatu yang dapat kita ekspor dan impor dari wadah kita untuk mendapatkan barang-barang paling tidak dari tanah.

Komponen Container

Kembali ke wadah atau komponen layar kita, mari impor apa yang kita miliki sejauh ini.

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Dimensions
} from 'react-native';
import Button from 'MyButton';
import Loader from 'Loader';

Hal utama yang perlu diperhatikan adalah import Loader from 'Loader'; garis yang berhubungan dengan instruksi ini, tetapi saya memasukkan semuanya supaya tidak ada kebingungan dari mana asalnya dalam pandangan saya. Untuk penampung saya, saya menggunakan layar di aplikasi sampel. Saya akan menggunakan StyleSheet dan View seperti biasa, menambahkan Teks dan Dimensi juga. Saya juga mengimpor Button komponen khusus .

Setelah kami menambahkan impor, kami dapat menentukan kelas komponen kontainer kami, dan menambahkan loadingke status kami. Saya juga memiliki address status saya karena itulah yang akan dikembalikan API saya. Di bawah ini adalah tempat kami setelah pembaruan ini.

...
class ActivityIndicatorScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      address: ''
    }
  }
  getCoordinates(query) {
    console.log('start loading animation');
  }
  render() {
    return (
      <View style={styles.container}>
        <Loader
          loading={this.state.loading} />
        <Text
          style={{fontSize: 24, paddingBottom: 20, fontWeight: 'bold'}}>Infinity Yoga Brookhaven</Text>
        <Button
          containerViewStyle={{width: '100%', marginBottom: 20}}
          onPress={() => this.getCoordinates('infinity yoga brookhaven')}
          title="Get Address"
          fontWeight="bold"
          buttonStyle={{borderRadius: 2}}
          backgroundColor='#333333'
          underlayColor="#cccccc" />
        <Text
          style={{fontSize: 18, paddingBottom: 10}}>{`${this.state.address}`}</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#CCCCCC',
    height: Dimensions.get('window').height,
    padding: 15,
    display: 'flex',
    alignItems: 'flex-start',
    width: '100%',
    paddingTop: 50
  }
});
export default ActivityIndicatorScreen;

Bagian penting di sini sehubungan dengan animasi pemuatan adalah:

  1. loading diatur ke true dalam this.state
  2. <Loader> komponen dengan properti loadingdisetel ke this.state.loading
  3. getCoordinates fungsi (atau apa pun yang Anda panggil untuk memulai animasi pemuatan)

Pada titik ini, jika Anda menyegarkan simulator Anda, Anda akan melihat layar putih yang indah ini (kiri pada gambar di bawah)! Jangan khawatir, itu hanya putih karena Anda memiliki modal yang langsung terlihat melalui loadingstatus dan prop serta gaya default untuk modal tersebut adalah opasitas penuh dan latar belakang putih. Jika Anda mengubah loadingstatus menjadi falsedan menyegarkan, Anda akan melihat tampilan komponen kontainer Anda tanpa modal overlay (bagi saya, terlihat seperti gambar kanan di bawah).

Kiri dengan pemuatan disetel ke true, kanan dengan pemuatan disetel ke salah

Keren, jadi setidaknya kita tahu komponen pemuatan diimpor dengan benar dan berfungsi. Sekarang kita dapat membuatnya terlihat seperti yang kita inginkan. Masuk loading.js, mari lanjutkan dan tambahkan sisa markup.

... 
<Modal 
  transparent = {true} 
  animationType = {'none'} 
  visible = {loading}> 
</Modal> 
...

Untuk mendapatkan latar belakang modal yang gelap, namun tetap transparan, kita akan menggunakan transparentprop dan mengaturnya ke true. Juga, saya akan mengatur my animationTypeke none pada modal (default adalah fade in).

Di dalam modal, kami akan menyiapkan apa yang sebenarnya kami ingin pengguna lihat.

... 
<Modal 
  transparent = {true} 
  animationType = {'none'} 
  visible = {loading}> 
  <View style = {styles.modalBackground}> 
    <View style = {styles.activityIndicatorWrapper}> 
      <ActivityIndicator 
        animating = {loading} /> 
    </View> 
  </View> 
</Modal> 
...

membutuhkan ini sehingga kami dapat mengatur warna dan opacity menjadi apa pun yang kami inginkan. Selanjutnya <View> akan menjadi latar belakang putih dengan sudut membulat ke ActivityIndicator kita.

Tentu saja, kita perlu menyertakan gaya untuk markup ini, dan kita akan mendapatkan loader.js file yang sudah jadi yang terlihat seperti ini.

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Modal,
  ActivityIndicator
} from 'react-native';

const Loader = props => {
  const {
    loading,
    ...attributes
  } = props;

  return (
    <Modal
      transparent={true}
      animationType={'none'}
      visible={loading}
      onRequestClose={() => {console.log('close modal')}}>
      <View style={styles.modalBackground}>
        <View style={styles.activityIndicatorWrapper}>
          <ActivityIndicator
            animating={loading} />
        </View>
      </View>
    </Modal>
  )
}

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

export default Loader;

Di stylesheet, Anda dapat melihat latar belakang menggunakan kotak fleksibel untuk menengahkan tampilan dalam di layar, dan menggunakan warna latar belakang hitam (# 000000) dengan opasitas 40% (# 00000040).

Latar belakang pembungkus ActivityIndicator akan menjadi persegi 100x100 dengan sudut membulat dan latar belakang putih. Ini juga menggunakan kotak fleksibel untuk memusatkan ActivityIndicator di dalamnya.

Sekarang, selama loadingstatus disetel ke truedalam komponen penampung kami, kami dapat menyegarkan (atau memanfaatkan pemuatan ulang panas), dan melihat modal dan indikator dengan gaya yang diterapkan.

Hebat! Tentu saja, kami tidak ingin ini selalu ditampilkan, jadi mari kita loading kembali ke false dan menyegarkan karena kami tahu ini terlihat bagus.

Sekarang kita kembali ke layar kita dengan semacam tombol atau sesuatu untuk memulai pemuatan. Yang perlu kita lakukan sekarang adalah mengisi tindakan itu di file komponen kontainer kita agar hal ini berfungsi.

... 
async getCoordinates (kueri) { 
  this.setState ({ 
    loading: true 
  });
  let coords = menunggu this.search (query);
  setTimeout (() => { 
    this.setState ({ 
      loading: false, 
      address: coords.results [0] .formatted_address 
    }); 
  }, 2500);
}
...

Tindakan menekan tombol akan dimulai dari getCoordinates fungsi di atas.

Hal pertama yang saya lakukan saat pengguna mengklik tombol disetel loading ke true. Ini akan memicu Loading komponen.

Selanjutnya, saya ingin melakukan panggilan API saya. Biasanya ini akan ada di toko, atau file lain, tetapi untuk kasus ini, saya hanya memasukkannya ke dalam komponen dan menyebutnya search() (lihat di bawah).

Anda dapat melihat saya menambahkan async ke awal getCoordinates() fungsi saya . Alasannya adalah, saya ingin await menanggapi panggilan API saya di dalam sebelum saya kemudian mengatur loadingkembali status saya ke false, pada gilirannya, menghapus indikator pemuatan.

Biasanya, Anda tidak akan menyertakan ini setTimeout, tetapi hanya akan memanggil this.setState() dan disetel loading ke false setelah Anda menunggu respons API Anda. Namun dalam kasus ini, Google Maps API merespons dengan sangat cepat, jadi untuk melihat indikator pemuatan saya, saya perlu menyetel waktu tunggu.

Ini adalah panggilan API yang saya sebutkan sebelumnya.

async search(query) {
  let encodedAddress = encodeURIComponent(query);
  let url = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodedAddress}`;
  try{
    let response = await fetch(url);
    if(response.status > 400){
      return {};
    } else {
      return await response.json();
    }
  } catch(e) {
      return {};
  }

Jadi secara keseluruhan, saya berakhir dengan file komponen kontainer yang terlihat seperti ini.

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Dimensions
} from 'react-native';

import Button from 'MyButton';
import Loader from 'Loader';

class ActivityIndicatorScreen extends Component {

  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      address: ''
    }
  }

  async search(query) {
    let encodedAddress = encodeURIComponent(query);

    let url = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodedAddress}`;

    try{
      let response = await fetch(url);
      if(response.status > 400){
        return {};
      } else {
        return await response.json();
      }
    } catch(e) {
      return {};
    }
  }

  async getCoordinates(query) {
    this.setState({
      loading: true
    });

    let coords = await this.search(query);
    console.log('coords', coords)

    setTimeout(() => {
      this.setState({
        loading: false,
        address: coords.results[0].formatted_address
      });
    }, 2500);
  }

  render() {
    return (
      <View style={styles.container}>
        <Loader
          loading={this.state.loading} />
        <Text
          style={{fontSize: 24, paddingBottom: 20, fontWeight: 'bold'}}>Infinity Yoga Brookhaven</Text>
        <Button
          containerViewStyle={{width: '100%', marginBottom: 20}}
          onPress={() => this.getCoordinates('infinity yoga brookhaven')}
          title="Get Address"
          fontWeight="bold"
          buttonStyle={{borderRadius: 2}}
          backgroundColor='#333333'
          underlayColor="#cccccc" />
        <Text
          style={{fontSize: 18, paddingBottom: 10}}>{`${this.state.address}`}</Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#CCCCCC',
    height: Dimensions.get('window').height,
    padding: 15,
    display: 'flex',
    alignItems: 'flex-start',
    width: '100%',
    paddingTop: 50
  }
});

export default ActivityIndicatorScreen;

Dan itu dia! Untuk menunjukkan keindahan lintas platformnya, ini dia di Android (setelah tidak melihat Android sekali selama pengembangan). Animasi terlihat agak lambat karena kualitas gif dan karena berjalan pada simulator, tetapi Anda mengerti.

Semoga ini bermanfaat jika Anda mencari animasi pemuatan sederhana tanpa membuat animasi sendiri.

Terima kasih sudah membaca! Silakan berkomentar jika Anda memiliki pemikiran atau rekomendasi.

Jika Anda menikmati, lanjutkan dan tambahkan tepuk tangan!

Happy React Native mengembangkan semuanya. ❤

 

react native loading indicator react native