KUNGFU TECH vietnam

Khóa học react-native

BackHandler trong React Native

0 phút đọc

BackHandler là một module trong React Native cho phép bạn xử lý các sự kiện nhấn nút quay lại (back button) trên các thiết bị Android. Điều này rất quan trọng để cung cấp trải nghiệm người dùng mượt mà và nhất quán, đặc biệt là khi bạn cần kiểm soát hành vi của ứng dụng khi người dùng nhấn nút quay lại. BackHandler cung cấp các phương thức và sự kiện để bạn có thể định nghĩa các hành động tùy chỉnh khi nút quay lại được nhấn.

Cú Pháp Cơ Bản

Để sử dụng BackHandler trong React Native, bạn cần import nó từ thư viện react-native và sử dụng các phương thức của nó để thêm và loại bỏ các sự kiện lắng nghe.

import React, { useEffect } from "react";
import { View, Text, BackHandler, Alert, StyleSheet } from "react-native";

const App = () => {
  useEffect(() => {
    const backAction = () => {
      Alert.alert("Hold on!", "Are you sure you want to go back?", [
        {
          text: "Cancel",
          onPress: () => null,
          style: "cancel",
        },
        { text: "YES", onPress: () => BackHandler.exitApp() },
      ]);
      return true;
    };

    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backAction
    );

    return () => backHandler.remove();
  }, []);

  return (
    <View style={styles.container}>
      <Text>Press back button to see the alert</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default App;

Các Thuộc Tính và Phương Thức Quan Trọng của BackHandler

addEventListener

Phương thức addEventListener được sử dụng để đăng ký một sự kiện lắng nghe cho một sự kiện cụ thể. Trong trường hợp của BackHandler, sự kiện thường là hardwareBackPress, tương ứng với sự kiện nhấn nút quay lại trên các thiết bị Android.

Cú pháp:

BackHandler.addEventListener(eventName, handler);

Ví dụ:

const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
  // Logic xử lý khi nhấn nút quay lại
  return true; // Ngăn chặn hành vi mặc định
});

removeEventListener

Phương thức removeEventListener được sử dụng để loại bỏ một sự kiện lắng nghe đã được đăng ký trước đó. Điều này rất quan trọng để tránh rò rỉ bộ nhớ.

Cú pháp:

BackHandler.removeEventListener(eventName, handler);

Ví dụ:

backHandler.remove();

exitApp

Phương thức exitApp được sử dụng để thoát ứng dụng một cách chương trình. Khi được gọi, phương thức này sẽ kết thúc ứng dụng và đưa người dùng trở về màn hình chính của hệ điều hành.

Cú pháp:

BackHandler.exitApp();

Ví dụ:

BackHandler.exitApp();

Ví Dụ Chi Tiết về BackHandler

Ví Dụ 1: Tạo BackHandler Cơ Bản

import React, { useEffect } from "react";
import { View, Text, BackHandler, Alert, StyleSheet } from "react-native";

const BasicBackHandler = () => {
  useEffect(() => {
    const backAction = () => {
      Alert.alert("Hold on!", "Are you sure you want to go back?", [
        {
          text: "Cancel",
          onPress: () => null,
          style: "cancel",
        },
        { text: "YES", onPress: () => BackHandler.exitApp() },
      ]);
      return true;
    };

    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backAction
    );

    return () => backHandler.remove();
  }, []);

  return (
    <View style={styles.container}>
      <Text>Press back button to see the alert</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default BasicBackHandler;

Ví Dụ 2: Tích Hợp BackHandler với React Navigation

import React, { useEffect } from "react";
import { View, Text, BackHandler, Alert, StyleSheet } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

const HomeScreen = ({ navigation }) => {
  useEffect(() => {
    const backAction = () => {
      if (navigation.isFocused()) {
        Alert.alert("Hold on!", "Are you sure you want to go back?", [
          {
            text: "Cancel",
            onPress: () => null,
            style: "cancel",
          },
          { text: "YES", onPress: () => BackHandler.exitApp() },
        ]);
        return true;
      }
      return false;
    };

    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backAction
    );

    return () => backHandler.remove();
  }, [navigation]);

  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
    </View>
  );
};

const DetailsScreen = () => (
  <View style={styles.container}>
    <Text>Details Screen</Text>
  </View>
);

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default App;

Ví Dụ 3: Sử Dụng Hook useBackHandler

import React from "react";
import { View, Text, Alert, StyleSheet } from "react-native";
import { useBackHandler } from "@react-native-community/hooks";

const CustomBackHandler = () => {
  useBackHandler(() => {
    Alert.alert("Hold on!", "Are you sure you want to go back?", [
      {
        text: "Cancel",
        onPress: () => null,
        style: "cancel",
      },
      { text: "YES", onPress: () => BackHandler.exitApp() },
    ]);
    return true;
  });

  return (
    <View style={styles.container}>
      <Text>Press back button to see the alert</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default CustomBackHandler;

Các Kỹ Thuật Tối Ưu Hóa Sử Dụng BackHandler

Sử Dụng useFocusEffect

Khi sử dụng React Navigation, bạn có thể sử dụng hook useFocusEffect để đảm bảo rằng sự kiện lắng nghe chỉ được thêm khi màn hình đang được focus và được loại bỏ khi màn hình mất focus.

Ví dụ:

import React from "react";
import { View, Text, Alert, StyleSheet, BackHandler } from "react-native";
import { useFocusEffect } from "@react-navigation/native";

const FocusedBackHandler = () => {
  useFocusEffect(
    React.useCallback(() => {
      const onBackPress = () => {
        Alert.alert("Hold on!", "Are you sure you want to go back?", [
          {
            text: "Cancel",
            onPress: () => null,
            style: "cancel",
          },
          { text: "YES", onPress: () => BackHandler.exitApp() },
        ]);
        return true;
      };

      BackHandler.addEventListener("hardwareBackPress", onBackPress);

      return () =>
        BackHandler.removeEventListener("hardwareBackPress", onBackPress);
    }, [])
  );

  return (
    <View style={styles.container}>
      <Text>Press back button to see the alert</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default FocusedBackHandler;

Tránh Sử Dụng Hàm Inline

Tránh sử dụng các hàm inline cho thuộc tính addEventListener để tránh việc tạo lại hàm mỗi khi component được render.

Ví dụ:

const backAction = () => {
  Alert.alert("Hold on!", "Are you sure you want to go back?", [
    {
      text: "Cancel",
      onPress: () => null,
      style: "cancel",
    },
    { text: "YES", onPress: () => BackHandler.exitApp() },
  ]);
  return true;
};

BackHandler.addEventListener("hardwareBackPress", backAction);

Các Hạn Chế của BackHandler Component

Mặc dù BackHandler component trong React Native rất mạnh mẽ, nhưng nó cũng có một số hạn chế:

  1. Chỉ Hỗ Trợ Android: BackHandler chỉ hoạt động trên các thiết bị Android và không có tác dụng trên iOS.
  2. Quản Lý Sự Kiện: Khi có nhiều sự kiện lắng nghe được đăng ký, việc quản lý và loại bỏ chúng có thể trở nên phức tạp.
  3. Tương Tác với Các Thư Viện Khác: Khi sử dụng với các thư viện điều hướng như React Navigation, cần phải cẩn thận để tránh xung đột và đảm bảo rằng các sự kiện lắng nghe được quản lý đúng cách.

Kết Luận

BackHandler là một thành phần cơ bản và quan trọng trong React Native, giúp bạn tạo ra các giao diện người dùng mượt mà và hiệu quả. Bằng cách hiểu rõ các thuộc tính và cách sử dụng BackHandler, bạn có thể tạo ra các giao diện người dùng mượt mà và hiệu quả. Hy vọng qua bài viết này, bạn đã có thể nắm bắt được cách sử dụng BackHandler trong React Native và áp dụng vào các dự án của mình.

Avatar
Được viết bởi

TechMely Team

Gợi ý câu hỏi phỏng vấn

Gợi ý bài viết

Bình luận

Chưa có bình luận nào

Khoá học javascript từ cơ bản đến chuyên sâuYoutube Techmely