React Native - Texto
Neste capítulo, vamos falar sobre Text componente no React Native.
Este componente pode ser aninhado e pode herdar propriedades de pai para filho. Isso pode ser útil de várias maneiras. Mostraremos um exemplo de capitalização da primeira letra, estilização de palavras ou partes do texto, etc.
Etapa 1: Criar arquivo
O arquivo que vamos criar é text_example.js
Etapa 2: App.js
Nesta etapa, criaremos apenas um contêiner simples.
App.js
import React, { Component } from 'react'
import TextExample from './text_example.js'
const App = () => {
return (
<TextExample/>
)
}
export default App
Etapa 3: Texto
Nesta etapa, usaremos o padrão de herança. styles.text será aplicado a todos Text componentes.
Você também pode notar como definimos outras propriedades de estilo para algumas partes do texto. É importante saber que todos os elementos filhos têm estilos pais passados para eles.
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
}
})
Você receberá a seguinte saída -