Cảnh báo trạng thái mạng của người dùng trong React Native

Giới thiệu

Hiện nay, rất ít ứng dụng không cần kết nối internet để truy cập ứng dụng của họ và đôi khi mình quên bật kết nối internet của mình trước khi mở ứng dụng và mình đã thấy một cảnh báo hiện lù lù là có nội dung như

"Vui lòng kiểm tra kết nối internet của bạn" ????

Vì vậy, hôm nay mình sẽ thực hiện tính năng này trong React Native.
Giả sử rằng bạn đã có một project HelloWorld cơ bản trong React Native. nếu bạn chưa có thì vào đây đọc nhé - đọc thêm . Oke, giờ bắt đầu nào ????Mình sẽ sử dụng API Nefinfo từ gói này @react-native-community/netinfo - đọc thêm . Trước tiên thì, mình phải cài đặt gói, Chạy lệnh này:

npm i @react-native-community/netinfo

Tiếp theo, mình chỉ cần thêm một thư mục mới tên là services trong đó, mình đã tạo ra một file tên là networkError.js  bên trong thư mục services. trong file này, Mình có thể cấu hình lời nhắn cảnh báo của mình đến với người dùng. có của nó trông như thế này -

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

export default ({color}) => {
  return (
    <View style={styles.errorContainer}>
      <Text style={styles.errorText}>Không có kết nối in tờ nét</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  errorContainer: {
    marginTop: 100,
    width: '100%',
    padding: 10,
    alignSelf: 'center',
    backgroundColor: '#a00',
  },
  errorText : {
    color: 'yellow',
    fontSize: 12,
    textAlign: 'center'
  }
})

và cái cuối cùng mình sẽ thêm vào App.js

import React, { useEffect, useState } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image
} from 'react-native';
import NetInfo from "@react-native-community/netinfo";
import NetworkError from './services/networkError'

function App() {
  const [netStatus, setNet] = useState(true)
  useEffect(() => {
    NetInfo.addEventListener(state => {
      setNet(state.isConnected)
    })
  })

  return (
    <View style={styles.container}>
      {!netStatus && <NetworkError />}
      <View style={styles.fill}>
        <Image 
source={{uri:'https://static.thenounproject.com/png/599828-200.png'}} style={{height:120,width:120}}/>
        <Text 
          style={styles.text}>
                Tắt mạng của bạn để thấy thông báo hihihi
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  fill: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  text:{
    fontSize:16
  }
});

export default App;

Ồ mình đã xong nó rồi đó :vChúc mừng năm mới :v
Hy vọng bạn thích hướng dẫn này, nếu bạn có bất kỳ câu hỏi / gợi ý nào, vui lòng cho mình biết trong phần bình luận.