React Native - Văn bản
Trong chương này, chúng ta sẽ nói về Text thành phần trong React Native.
Thành phần này có thể được lồng vào nhau và nó có thể kế thừa các thuộc tính từ cha sang con. Điều này có thể hữu ích theo nhiều cách. Chúng tôi sẽ chỉ cho bạn ví dụ về việc viết hoa chữ cái đầu tiên, tạo kiểu cho các từ hoặc các phần của văn bản, v.v.
Bước 1: Tạo tệp
Tệp chúng tôi sẽ tạo là text_example.js
Bước 2: App.js
Trong bước này, chúng ta sẽ chỉ tạo một vùng chứa đơn giản.
App.js
import React, { Component } from 'react'
import TextExample from './text_example.js'
const App = () => {
return (
<TextExample/>
)
}
export default App
Bước 3: Nhắn tin
Trong bước này, chúng ta sẽ sử dụng mẫu kế thừa. styles.text sẽ được áp dụng cho tất cả Text các thành phần.
Bạn cũng có thể nhận thấy cách chúng tôi đặt các thuộc tính tạo kiểu khác cho một số phần của văn bản. Điều quan trọng cần biết là tất cả các phần tử con đều có kiểu gốc được truyền cho chúng.
text_example.js
import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native'
const TextExample = () => {
return (
<View style = {styles.container}>
<Text style = {styles.text}>
<Text style = {styles.capitalLetter}>
L
</Text>
<Text>
orem ipsum dolor sit amet, sed do eiusmod.
</Text>
<Text>
Ut enim ad <Text style = {styles.wordBold}>minim </Text> veniam,
quis aliquip ex ea commodo consequat.
</Text>
<Text style = {styles.italicText}>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
</Text>
<Text style = {styles.textShadow}>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</Text>
</Text>
</View>
)
}
export default TextExample
const styles = StyleSheet.create ({
container: {
alignItems: 'center',
marginTop: 100,
padding: 20
},
text: {
color: '#41cdf4',
},
capitalLetter: {
color: 'red',
fontSize: 20
},
wordBold: {
fontWeight: 'bold',
color: 'black'
},
italicText: {
color: '#37859b',
fontStyle: 'italic'
},
textShadow: {
textShadowColor: 'red',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius : 5
}
})
Bạn sẽ nhận được kết quả sau: