Text trong React Native

Text là một trong những thành phần cơ bản và quan trọng nhất trong React Native, được sử dụng để hiển thị văn bản trong ứng dụng di động. Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về thành phần Text trong React Native, các thuộc tính và phương pháp styling, cùng với các ví dụ cụ thể để minh họa.

Giới Thiệu về Text Component

Text component trong React Native tương tự như thẻ <p> hoặc <span> trong HTML. Nó cho phép bạn hiển thị văn bản và áp dụng các kiểu dáng khác nhau. Text component có thể được lồng nhau và có thể kế thừa các thuộc tính từ thành phần cha.

Cú Pháp Cơ Bản

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
};

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

export default App;

Các Thuộc Tính của Text Component

Text component trong React Native có nhiều thuộc tính (props) giúp bạn kiểm soát cách hiển thị và hành vi của văn bản. Dưới đây là một số thuộc tính phổ biến:

ellipsizeMode

Thuộc tính ellipsizeMode xác định cách văn bản bị cắt ngắn nếu nó tràn ra ngoài container. Các tùy chọn bao gồm head, middle, tail, và clip.

Ví dụ:

<Text numberOfLines={1} ellipsizeMode='tail'>
  This is a very long text that will be truncated at the end.
</Text>

numberOfLines

Thuộc tính numberOfLines xác định số dòng tối đa mà văn bản có thể hiển thị trước khi bị cắt ngắn.

Ví dụ:

<Text numberOfLines={2}>
  This text will be truncated after two lines. This is the second line.
</Text>

onPress

Thuộc tính onPress cho phép bạn chỉ định một hàm sẽ được gọi khi văn bản được nhấn, cho phép xử lý các sự kiện chạm.

Ví dụ:

<Text onPress={() => alert('Text pressed!')}>
  Press me
</Text>

style

Thuộc tính style cho phép bạn áp dụng các kiểu dáng cho văn bản, có thể sử dụng inline styles hoặc tham chiếu đến một đối tượng style.

Ví dụ:

<Text style={{ fontSize: 20, color: 'red' }}>
  Styled text
</Text>

minimumFontScale

Thuộc tính minimumFontScale xác định tỷ lệ phóng to tối thiểu cho văn bản khi adjustsFontSizeToFit được bật.

Ví dụ:

<Text adjustsFontSizeToFit={true} minimumFontScale={0.5}>
  This text will adjust its font size, but won't go below 50% of its original size.
</Text>

adjustsFontSizeToFit

Thuộc tính adjustsFontSizeToFit xác định liệu văn bản có tự động điều chỉnh kích thước phông chữ để phù hợp với container hay không.

Ví dụ:

<Text adjustsFontSizeToFit={true}>
  This text will adjust its font size to fit its container.
</Text>

allowFontScaling

Thuộc tính allowFontScaling xác định liệu văn bản có tự động phóng to theo cài đặt kích thước phông chữ của hệ thống hay không.

Ví dụ:

<Text allowFontScaling={false}>
  This text won't scale with the system font size.
</Text>

Styling Text Component

Styling trong React Native sử dụng JavaScript để định nghĩa các style cho các thành phần. Các style có thể được áp dụng trực tiếp thông qua thuộc tính style hoặc được định nghĩa trong StyleSheet.

Sử Dụng Inline Styles

Inline styles được định nghĩa trực tiếp trong thuộc tính style của một thành phần.

Ví dụ:

<Text style={{ fontSize: 20, color: 'blue' }}>
  Hello, World!
</Text>

Sử Dụng StyleSheet

StyleSheet được sử dụng để tạo các style riêng biệt và tái sử dụng chúng trong nhiều thành phần.

Ví dụ:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
};

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

export default App;

Ví Dụ Chi Tiết về Text Component

Ví Dụ 1: Văn Bản Đơn Giản

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

const SimpleText = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
};

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

export default SimpleText;

Ví Dụ 2: Văn Bản với Các Kiểu Dáng Khác Nhau

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

const StyledText = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        <Text style={styles.boldText}>Bold</Text> and <Text style={styles.italicText}>Italic</Text> text.
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
  },
  boldText: {
    fontWeight: 'bold',
  },
  italicText: {
    fontStyle: 'italic',
  },
});

export default StyledText;

Ví Dụ 3: Văn Bản với Sự Kiện Chạm

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

const PressableText = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text} onPress={() => Alert.alert('Text pressed!')}>
        Press me
      </Text>
    </View>
  );
};

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

export default PressableText;

Kết Hợp Các Thuộc Tính và Kiểu Dáng

Bạn có thể kết hợp các thuộc tính và kiểu dáng để tạo ra các văn bản phức tạp và linh hoạt hơn.

Ví dụ:

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

const ComplexText = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        <Text style={styles.capitalLetter}>L</Text>
        <Text>orem ipsum dolor sit amet, </Text>
        <Text style={styles.boldText}>consectetur</Text>
        <Text> adipiscing elit. </Text>
        <Text style={styles.italicText}>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Text>
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  text: {
    color: '#333',
  },
  capitalLetter: {
    color: 'red',
    fontSize: 24,
  },
  boldText: {
    fontWeight: 'bold',
  },
  italicText: {
    fontStyle: 'italic',
  },
});

export default ComplexText;

Kết Luận

Text component trong React Native là một công cụ mạnh mẽ và linh hoạt để hiển thị văn bản trong ứng dụng di động. Bằng cách hiểu rõ các thuộc tính và phương pháp styling, bạn có thể tạo ra các giao diện người dùng hấp dẫn và dễ sử dụng. Hy vọng qua bài viết này, bạn đã có thể nắm bắt được cách sử dụng Text component trong React Native và áp dụng vào các dự án của mình.