KeyboardAvoidingView trong React Native

KeyboardAvoidingView là một component trong React Native giúp quản lý tương tác giữa giao diện người dùng và bàn phím, đặc biệt là trên các thiết bị iOS. Khi bàn phím xuất hiện, nó có thể che khuất các thành phần giao diện người dùng như TextInput, gây khó khăn cho người dùng khi nhập liệu. KeyboardAvoidingView giúp điều chỉnh vị trí của các thành phần này để đảm bảo chúng luôn hiển thị trên màn hình, mang lại trải nghiệm người dùng mượt mà hơn.

Cú Pháp Cơ Bản

Để sử dụng KeyboardAvoidingView trong React Native, bạn cần import nó từ thư viện react-native và sử dụng các thuộc tính của nó để điều chỉnh hành vi khi bàn phím xuất hiện.

javascript Copy

import React from "react";
import {
  View,
  TextInput,
  Button,
  KeyboardAvoidingView,
  StyleSheet,
  Platform,
} from "react-native";

const App = () => {
  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === "ios" ? "padding" : null}
    >
      <TextInput placeholder="Type here" style={styles.input} />
      <Button title="Submit" onPress={() => {}} />
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 10,
  },
  input: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
});

export default App;

Các Thuộc Tính Quan Trọng của KeyboardAvoidingView

behavior

Thuộc tính behavior xác định cách KeyboardAvoidingView phản ứng khi bàn phím xuất hiện. Các giá trị có thể bao gồm height, position, và padding.

Ví dụ:

javascript Copy

<KeyboardAvoidingView behavior="padding">{/* Nội dung */}</KeyboardAvoidingView>

keyboardVerticalOffset

Thuộc tính keyboardVerticalOffset xác định khoảng cách giữa đỉnh của màn hình và KeyboardAvoidingView. Điều này hữu ích khi bạn có các thành phần giao diện khác như thanh điều hướng.

Ví dụ:

javascript Copy

<KeyboardAvoidingView keyboardVerticalOffset={75}>
  {/* Nội dung */}
</KeyboardAvoidingView>

enabled

Thuộc tính enabled xác định liệu KeyboardAvoidingView có được kích hoạt hay không. Mặc định là true.

Ví dụ:

javascript Copy

<KeyboardAvoidingView enabled={false}>{/* Nội dung */}</KeyboardAvoidingView>

Ví Dụ Chi Tiết về KeyboardAvoidingView

Ví Dụ 1: Sử Dụng KeyboardAvoidingView Cơ Bản

javascript Copy

import React from "react";
import {
  View,
  TextInput,
  Button,
  KeyboardAvoidingView,
  StyleSheet,
  Platform,
} from "react-native";

const BasicKeyboardAvoidingView = () => {
  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === "ios" ? "padding" : null}
    >
      <TextInput placeholder="Type here" style={styles.input} />
      <Button title="Submit" onPress={() => {}} />
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 10,
  },
  input: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
});

export default BasicKeyboardAvoidingView;

Ví Dụ 2: Sử Dụng KeyboardAvoidingView với Nhiều TextInput

javascript Copy

import React from "react";
import {
  View,
  TextInput,
  Button,
  KeyboardAvoidingView,
  StyleSheet,
  Platform,
} from "react-native";

const MultipleTextInputExample = () => {
  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === "ios" ? "padding" : "height"}
    >
      <TextInput placeholder="Type here" style={styles.input} />
      <TextInput placeholder="Type more here" style={styles.input} />
      <Button title="Submit" onPress={() => {}} />
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 10,
  },
  input: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
});

export default MultipleTextInputExample;

javascript Copy

import React, { useState } from "react";
import {
  View,
  TextInput,
  Button,
  KeyboardAvoidingView,
  Modal,
  StyleSheet,
  Platform,
  SafeAreaView,
} from "react-native";

const ModalExample = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Button title="Open Modal" onPress={() => setModalVisible(true)} />
      {modalVisible && (
        <KeyboardAvoidingView
          behavior={Platform.OS === "ios" ? "padding" : "height"}
        >
          <Modal
            animationType="slide"
            transparent={true}
            visible={modalVisible}
          >
            <SafeAreaView style={styles.safeAreaView}>
              <View style={styles.modalContentContainer}>
                <Button
                  title="Close Modal"
                  onPress={() => setModalVisible(false)}
                />
                <TextInput placeholder="Type here" style={styles.input} />
              </View>
            </SafeAreaView>
          </Modal>
        </KeyboardAvoidingView>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  safeAreaView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  modalContentContainer: {
    width: "80%",
    padding: 20,
    backgroundColor: "white",
    borderRadius: 10,
  },
  input: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
});

export default ModalExample;

Tùy Chỉnh KeyboardAvoidingView

Sử Dụng Các Tùy Chọn Tùy Chỉnh

Bạn có thể sử dụng các tùy chọn tùy chỉnh để thay đổi giao diện và hành vi của KeyboardAvoidingView.

Ví dụ:

javascript Copy

import React from "react";
import {
  View,
  TextInput,
  Button,
  KeyboardAvoidingView,
  StyleSheet,
  Platform,
} from "react-native";

const CustomKeyboardAvoidingView = () => {
  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      keyboardVerticalOffset={Platform.OS === "ios" ? 100 : 0}
    >
      <TextInput placeholder="Type here" style={styles.input} />
      <Button title="Submit" onPress={() => {}} />
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 10,
  },
  input: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
});

export default CustomKeyboardAvoidingView;

Sử Dụng Thư Viện Bên Ngoài

Nếu bạn cần các tính năng phức tạp hơn, bạn có thể sử dụng các thư viện bên ngoài như react-native-keyboard-aware-scroll-view hoặc react-native-keyboard-manager.

Sử Dụng react-native-keyboard-aware-scroll-view

Cài Đặt Thư Viện

bash Copy

npm install react-native-keyboard-aware-scroll-view

Sử Dụng Thư Viện

javascript Copy

import React from "react";
import { View, TextInput, Button, StyleSheet } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";

const KeyboardAwareScrollViewExample = () => {
  return (
    <KeyboardAwareScrollView style={styles.container}>
      <TextInput placeholder="Type here" style={styles.input} />
      <TextInput placeholder="Type more here" style={styles.input} />
      <Button title="Submit" onPress={() => {}} />
    </KeyboardAwareScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
  input: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
});

export default KeyboardAwareScrollViewExample;

Sử Dụng react-native-keyboard-manager

Cài Đặt Thư Viện

bash Copy

npm install react-native-keyboard-manager

Sử Dụng Thư Viện

javascript Copy

import React from "react";
import { View, TextInput, Button, StyleSheet } from "react-native";
import KeyboardManager from "react-native-keyboard-manager";

KeyboardManager.setEnable(true);

const KeyboardManagerExample = () => {
  return (
    <View style={styles.container}>
      <TextInput placeholder="Type here" style={styles.input} />
      <TextInput placeholder="Type more here" style={styles.input} />
      <Button title="Submit" onPress={() => {}} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 10,
  },
  input: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
});

export default KeyboardManagerExample;

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

Sử Dụng StyleSheet để Tối Ưu Hóa Hiệu Suất

Sử dụng StyleSheet.create để định nghĩa các style giúp tối ưu hóa hiệu suất vì các style được tạo ra chỉ một lần và được tham chiếu lại nhiều lần.

Ví dụ:

javascript Copy

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 10,
  },
  input: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
});

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

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

Ví dụ:

javascript Copy

const showAlert = () => {
  Alert.alert("Alert Title", "My Alert Msg", [
    { text: "OK", onPress: () => console.log("OK Pressed") },
  ]);
};

<Button title="Show Alert" onPress={showAlert} />;

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

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

Hiệu Suất: Khi sử dụng quá nhiều sự kiện lắng nghe thay đổi kích thước, hiệu suất của ứng dụng có thể bị ảnh hưởng.
Tùy Chỉnh Giao Diện: KeyboardAvoidingView không hỗ trợ nhiều tùy chỉnh giao diện như thay đổi font chữ, thêm biểu tượng, hoặc tạo nền gradient.
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.

Kết Luận

KeyboardAvoidingView 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 KeyboardAvoidingView, 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 KeyboardAvoidingView trong React Native và áp dụng vào các dự án của mình.

Cú Pháp Cơ Bản

Các Thuộc Tính Quan Trọng của KeyboardAvoidingView

behavior

keyboardVerticalOffset

enabled

Ví Dụ Chi Tiết về KeyboardAvoidingView

Ví Dụ 1: Sử Dụng KeyboardAvoidingView Cơ Bản

Ví Dụ 2: Sử Dụng KeyboardAvoidingView với Nhiều TextInput

Ví Dụ 3: Sử Dụng KeyboardAvoidingView với Modal

Tùy Chỉnh KeyboardAvoidingView

Sử Dụng Các Tùy Chọn Tùy Chỉnh

Sử Dụng Thư Viện Bên Ngoài

Sử Dụng react-native-keyboard-aware-scroll-view

Sử Dụng react-native-keyboard-manager

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

Sử Dụng StyleSheet để Tối Ưu Hóa Hiệu Suất

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

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

Kết Luận

Bình luận