प्रतिक्रियात्मक मूल - पाठ
इस अध्याय में, हम बात करेंगे Text प्रतिक्रियाशील मूल में घटक।
इस घटक को नेस्ट किया जा सकता है और यह माता-पिता से बच्चे में गुण विरासत में मिल सकता है। यह कई मायनों में उपयोगी हो सकता है। हम आपको पहले अक्षर को कैपिटल करने, शब्दों को स्टाइल करने या टेक्स्ट के कुछ हिस्सों आदि का उदाहरण दिखाएंगे।
चरण 1: फ़ाइल बनाएँ
हम जो फाइल बनाने जा रहे हैं, वह है text_example.js
चरण 2: App.js
इस चरण में, हम बस एक साधारण कंटेनर बनाएंगे।
App.js
import React, { Component } from 'react'
import TextExample from './text_example.js'
const App = () => {
return (
<TextExample/>
)
}
export default App
चरण 3: पाठ
इस चरण में, हम इनहेरिटेंस पैटर्न का उपयोग करेंगे। styles.text सभी के लिए लागू किया जाएगा Text अवयव।
आप यह भी देख सकते हैं कि हमने पाठ के कुछ हिस्सों में अन्य स्टाइलिंग गुण कैसे सेट किए हैं। यह जानना महत्वपूर्ण है कि सभी बाल तत्वों की मूल शैलियाँ उनके पास हैं।
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
}
})
आपको निम्न आउटपुट प्राप्त होंगे -