TextInput trong React Native

TextInput là một trong những thành phần cơ bản và quan trọng nhất trong React Native, cho phép người dùng nhập văn bản vào ứng dụng. Nó được sử dụng rộng rãi trong các biểu mẫu, thanh tìm kiếm, và nhiều tình huống khác yêu cầu người dùng nhập dữ liệu. TextInput cung cấp nhiều thuộc tính và phương thức để tùy chỉnh và kiểm soát hành vi của nó, giúp tạo ra các giao diện người dùng linh hoạt và thân thiện.

Cú Pháp Cơ Bản

Để sử dụng TextInput trong React Native, bạn cần import nó từ thư viện react-native và sử dụng nó như một thành phần trong ứng dụng của bạn.

javascript Copy

import React, { useState } from "react";
import { TextInput, View, StyleSheet } from "react-native";

const App = () => {
  const [text, setText] = useState("");

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter text"
        value={text}
        onChangeText={setText}
      />
    </View>
  );
};

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

export default App;

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

value

Thuộc tính value xác định giá trị hiện tại của TextInput. Đây là một thuộc tính controlled component, nghĩa là giá trị của nó được kiểm soát bởi state và được cập nhật thông qua thuộc tính onChangeText.

Ví dụ:

javascript Copy

<TextInput value={text} onChangeText={setText} />

onChangeText

Thuộc tính onChangeText là một hàm callback được gọi khi nội dung của TextInput thay đổi. Nó nhận giá trị mới của văn bản làm đối số.

Ví dụ:

javascript Copy

<TextInput onChangeText={(text) => console.log(text)} />

placeholder

Thuộc tính placeholder xác định văn bản gợi ý được hiển thị khi TextInput trống.

Ví dụ:

javascript Copy

<TextInput placeholder="Enter your name" />

keyboardType

Thuộc tính keyboardType xác định loại bàn phím sẽ được hiển thị. Các giá trị có thể bao gồm default, numeric, email-address, phone-pad, v.v.

Ví dụ:

javascript Copy

<TextInput keyboardType="email-address" />

secureTextEntry

Thuộc tính secureTextEntry xác định liệu văn bản nhập vào có được mã hóa hay không. Thường được sử dụng cho các trường mật khẩu.

Ví dụ:

javascript Copy

<TextInput secureTextEntry={true} />

maxLength

Thuộc tính maxLength giới hạn số ký tự tối đa mà người dùng có thể nhập vào.

Ví dụ:

javascript Copy

<TextInput maxLength={10} />

multiline

Thuộc tính multiline xác định liệu TextInput có thể chứa nhiều dòng văn bản hay không.

Ví dụ:

javascript Copy

<TextInput multiline={true} />

onSubmitEditing

Thuộc tính onSubmitEditing là một hàm callback được gọi khi người dùng nhấn nút submit trên bàn phím.

Ví dụ:

javascript Copy

<TextInput onSubmitEditing={() => console.log("Submit pressed")} />

onFocus và onBlur

onFocus: Hàm callback được gọi khi TextInput được focus.
onBlur: Hàm callback được gọi khi TextInput bị mất focus.

Ví dụ:

javascript Copy

<TextInput
  onFocus={() => console.log("Focused")}
  onBlur={() => console.log("Blurred")}
/>

Ví Dụ Chi Tiết về TextInput

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

javascript Copy

import React, { useState } from "react";
import { TextInput, View, StyleSheet, Text } from "react-native";

const BasicTextInput = () => {
  const [text, setText] = useState("");

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter text"
        value={text}
        onChangeText={setText}
      />
      <Text style={styles.text}>You entered: {text}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  input: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    width: "80%",
    padding: 10,
    marginBottom: 20,
  },
  text: {
    fontSize: 18,
  },
});

export default BasicTextInput;

Hình ảnh minh họa:

Basic TextInput

Ví Dụ 2: Tạo Form Đăng Nhập

javascript Copy

import React, { useState } from "react";
import { TextInput, View, StyleSheet, Button, Alert } from "react-native";

const LoginForm = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleLogin = () => {
    Alert.alert("Login", `Email: ${email}\nPassword: ${password}`);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
};

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

export default LoginForm;

Hình ảnh minh họa:

Ví Dụ 3: TextInput với Chức Năng Kéo Để Làm Mới

javascript Copy

import React, { useState } from "react";
import {
  TextInput,
  View,
  StyleSheet,
  RefreshControl,
  ScrollView,
  Text,
} from "react-native";

const RefreshableTextInput = () => {
  const [text, setText] = useState("");
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = () => {
    setRefreshing(true);
    setTimeout(() => {
      setText("");
      setRefreshing(false);
    }, 2000);
  };

  return (
    <ScrollView
      contentContainerStyle={styles.container}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    >
      <TextInput
        style={styles.input}
        placeholder="Enter text"
        value={text}
        onChangeText={setText}
      />
      <Text style={styles.text}>You entered: {text}</Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    width: "100%",
    padding: 10,
    marginBottom: 20,
  },
  text: {
    fontSize: 18,
  },
});

export default RefreshableTextInput;

Hình ảnh minh họa:

Refreshable TextInput

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

Prefetching

Prefetching là kỹ thuật tải trước hình ảnh để cải thiện hiệu suất và trải nghiệm người dùng. React Native cung cấp phương thức Image.prefetch để tải trước hình ảnh.

Ví dụ:

javascript Copy

import React, { useEffect } from "react";
import { Image, View, StyleSheet } from "react-native";

const App = () => {
  useEffect(() => {
    Image.prefetch("https://reactnative.dev/img/tiny_logo.png");
  }, []);

  return (
    <View style={styles.container}>
      <Image
        source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
        style={styles.image}
      />
    </View>
  );
};

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

export default App;

Caching

Caching là kỹ thuật lưu trữ hình ảnh đã tải xuống để sử dụng lại sau này, giúp giảm thiểu việc tải lại hình ảnh từ mạng và cải thiện hiệu suất.

Ví dụ:

javascript Copy

import React, { useState, useEffect } from "react";
import { Image, View, StyleSheet, ActivityIndicator } from "react-native";
import FastImage from "react-native-fast-image";

const App = () => {
  const [imageUri, setImageUri] = useState(null);

  useEffect(() => {
    const fetchImage = async () => {
      const uri = "https://reactnative.dev/img/tiny_logo.png";
      const cachedImage = await FastImage.preload([{ uri }]);
      setImageUri(uri);
    };

    fetchImage();
  }, []);

  return (
    <View style={styles.container}>
      {imageUri ? (
        <FastImage
          style={styles.image}
          source={{ uri: imageUri }}
          resizeMode={FastImage.resizeMode.contain}
        />
      ) : (
        <ActivityIndicator size="large" color="#0000ff" />
      )}
    </View>
  );
};

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

export default App;

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

Mặc dù TextInput 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 TextInput lồng nhau, hiệu suất của ứng dụng có thể bị ảnh hưởng.
Khả Năng Tái Sử Dụng: Việc sử dụng inline styles có thể làm giảm khả năng tái sử dụng các thành phần.
Quản Lý Sự Kiện: TextInput không hỗ trợ tất cả các sự kiện như các thành phần khác, ví dụ như sự kiện hover.

Kết Luận

TextInput 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 TextInput, 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 TextInput 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 TextInput

value

onChangeText

placeholder

keyboardType

secureTextEntry

maxLength

multiline

onSubmitEditing

onFocus và onBlur

Ví Dụ Chi Tiết về TextInput

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

Ví Dụ 2: Tạo Form Đăng Nhập

Ví Dụ 3: TextInput với Chức Năng Kéo Để Làm Mới

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

Prefetching

Caching

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

Kết Luận

Bình luận