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