Khóa học react-native

TextInput trong React Native

0 phút đọc

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.

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ụ:

<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ụ:

<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ụ:

<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ụ:

<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ụ:

<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ụ:

<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ụ:

<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ụ:

<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ụ:

<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

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

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:

Login Form

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

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ụ:

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ụ:

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ế:

  1. 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.
  2. 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.
  3. 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.

Avatar
Được viết bởi

TechMely Team

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

entry

React Native là gì?

entry

What is React Native?

entry

List some benefits of using React Native for building mobile apps?

Bình luận

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

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