Pernahkah Anda melihat tanda merah "Tidak Ada Sambungan Internet" di aplikasi seluler seperti Facebook Messenger. Ini terlihat seperti ini:

Saya akan menunjukkan kepada Anda cara membuatnya di aplikasi React Native Anda.

Mari kita mulai, oke?

Buat Project Baru React Native

react-native init InternetSign

cd ke proyek dan jalankan proyek dan jalankan

react-native run-ios 
         ATAU 
react-native run-android

Buat Komponen OfflineNotice.js

import React, { PureComponent } from 'react';
import { View, Text, NetInfo, Dimensions, StyleSheet } from 'react-native';
const { width } = Dimensions.get('window');
function MiniOfflineSign() {
  return (
    <View style={styles.offlineContainer}>
      <Text style={styles.offlineText}>No Internet Connection</Text>
    </View>
  );
}
class OfflineNotice extends PureComponent {
  render() {
      return <MiniOfflineSign />;
  }
}
const styles = StyleSheet.create({
  offlineContainer: {
    backgroundColor: '#b52424',
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    width,
    position: 'absolute',
    top: 30
  },
  offlineText: { 
    color: '#fff'
  }
});
export default OfflineNotice;

Kami baru saja mendesain tanda tiruan "Tidak Ada Sambungan Internet".

Di file `App.js` yang menunjukkan titik awal aplikasi, impor komponen OfflineNotice

import OfflineNotice from './OfflineNotice'

Seperti inilah tampilan fungsi render dari file App.js Anda jika Anda telah mengikutinya

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <OfflineNotice /> <---- add this here
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

Aplikasi kita akan terlihat seperti ini sekarang

Mari buat komponen OfflineNotice menjadi responsif

Oke, kita sudah berhasil membuat tanda “No Internet Connection”. Sekarang, kita harus menghubungkannya ke perubahan Jaringan sehingga ketika ada Koneksi Internet di telepon, tanda itu tidak muncul dan jika tidak ada Koneksi Internet, tanda itu muncul dan memberi tahu pengguna kami bahwa mereka baik-baik saja, tidak Koneksi Internet di perangkat mereka.

Kami akan menggunakan negara bagian lokal yang disediakan dengan React.

state = { 
    isConnected: true 
};

Saya berasumsi bahwa status koneksi awal adalah benar, jika tidak, kita akan melihat tanda "Tidak Ada Koneksi Internet" seperti sepersekian detik saat aplikasi di-refresh (Ini mengganggu saya tbh)

Setelah menyetel status, kita dapat mengubah status koneksi yang akan kita peroleh dari `NetInfo` menjadi benar atau salah.

Kami membuat fungsi untuk menangani perubahan dalam koneksi ini:

function handleConnectivityChange = isConnected => { 
  this.setState({isConnected}); 
}

Sekarang, kita harus menghubungkan fungsi handleConnectivityChange, jadi dalam metode siklus hidup componentDidMount, kita menambahkan event listener ke modul NetInfo.

PS: Pastikan Anda mengimpor NetInfo dari react-native

import { NetInfo } from 'react-native'

Dari dokumen, berikut adalah ringkasan tentang apa itu komponen NetInfo: NetInfo memperlihatkan info tentang status online / offline

ComponentDidMount kita akan terlihat seperti ini:

componentDidMount() { 
  NetInfo.isConnected.addEventListener ('connectionChange', this.handleConnectivityChange); 
}

Selain itu, ini juga praktik yang baik untuk menghapus event listener saat komponen Anda akan dilepas untuk menghindari kebocoran memori, jadi kami akan melakukannya dalam metode siklus proses componentWillUnmount.

componentWillUnmount() {
    NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
 }

Hanya ada satu hal terakhir yang harus dilakukan.

Kami harus mengubah fungsi render di komponen OfflineNotice kami sehingga ketika bagian dari status isConnected salah (artinya kami tidak memiliki koneksi internet), kami menunjukkan tanda lain kami tidak menunjukkan apa-apa.

render() {
    if (!this.state.isConnected) {
      return <MiniOfflineSign />;
    }
    return null;
  }

Boom, hanya itu saja. Kami telah berhasil membuat tanda “Tidak Ada Koneksi Internet” yang menanggapi status koneksi di perangkat seluler Anda.

Komponen OfflineNotice.js terakhir akan terlihat seperti ini:

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

const { width } = Dimensions.get('window');

function MiniOfflineSign() {
  return (
    <View style={styles.offlineContainer}>
      <Text style={styles.offlineText}>No Internet Connection</Text>
    </View>
  );
}

class OfflineNotice extends PureComponent {
  state = {
    isConnected: true
  };

  componentDidMount() {
    NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
  }

  componentWillUnmount() {
    NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
  }

  handleConnectivityChange = isConnected => {
      this.setState({ isConnected });
  };

  render() {
    if (!this.state.isConnected) {
      return <MiniOfflineSign />;
    }
    return null;
  }
}

const styles = StyleSheet.create({
  offlineContainer: {
    backgroundColor: '#b52424',
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    width,
    position: 'absolute',
    top: 30
  },
  offlineText: { color: '#fff' }
});

export default OfflineNotice;