React Native में पाठ को लंबवत रूप से संरेखित करना मुश्किल हो सकता है, क्योंकि इसमें वेब के `vertical-align` का कोई सीधा समकक्ष नहीं है। हालाँकि, Flexbox का उपयोग करने से सुंदर समाधान मिलते हैं। यह लेख दो प्रभावी तरीकों का पता लगाता है: किसी कंटेनर के अंदर पाठ को केंद्रित करने के लिए justifyContent और alignItems का उपयोग करना।
विषय सूची
justifyContent और alignItems के साथ पाठ को केंद्रित करना
यह तरीका सरल परिदृश्यों के लिए आदर्श है जहाँ आप अपने मूल कंटेनर के अंदर सीधे पाठ को केंद्रित करना चाहते हैं। यह लंबवत और क्षैतिज दोनों संरेखण को एक साथ संभालने के लिए Flexbox की शक्ति पर निर्भर करता है।
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const CenteredText = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>यह पाठ लंबवत और क्षैतिज रूप से केंद्रित है!</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
height: 200,
backgroundColor: 'lightblue',
},
text: {
fontSize: 20,
},
});
export default CenteredText;
व्याख्या:
flex: 1:Viewको अपने मूल स्थान की उपलब्ध जगह को भरने के लिए विस्तार करने की अनुमति देता है।justifyContent: 'center':Viewके अंदर सामग्री को लंबवत रूप से केंद्रित करता है।alignItems: 'center': सामग्री को क्षैतिज रूप से केंद्रित करता है। यह सुनिश्चित करता है कि पाठ अपनी चौड़ाई बदलने पर भी केंद्रित रहे।height: 200: एक निश्चित ऊँचाई निर्धारित करना महत्वपूर्ण है। इसके बिना,justifyContentका कोई प्रभाव नहीं होगा, क्योंकि पाठ शीर्ष पर डिफ़ॉल्ट हो जाएगा।
उन्नत केंद्रण: नेस्टेड घटकों को संभालना
नेस्टेड घटकों के साथ अधिक जटिल लेआउट के लिए, थोड़े अलग दृष्टिकोण की आवश्यकता होती है। यह विधि सटीक लंबवत संरेखण प्राप्त करने के लिए flexDirection, alignItems और flex के संयोजन का उपयोग करती है।
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const CenteredTextNested = () => {
return (
<View style={styles.container}>
<View style={styles.innerContainer}>
<Text style={styles.text}>यह पाठ भी लंबवत और क्षैतिज रूप से केंद्रित है!</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
height: 200,
backgroundColor: 'lightcoral',
},
innerContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 20,
},
});
export default CenteredTextNested;
व्याख्या:
- बाहरी
View(container) कोflexDirection: 'row'की आवश्यकता नहीं है। आंतरिकViewसंरेखण को संभालता है। - आंतरिक
View(innerContainer) परflex: 1इसे अपने मूल ऊँचाई को भरने के लिए विस्तार करने की अनुमति देता है। innerContainerपरjustifyContent: 'center'औरalignItems: 'center'उस कंटेनर के अंदर पाठ को लंबवत और क्षैतिज दोनों तरह से केंद्रित करते हैं।
विज़ुअल डिबगिंग के लिए आवश्यकतानुसार ऊँचाई और पृष्ठभूमि रंगों को समायोजित करना याद रखें। स्वच्छ और रखरखाव योग्य कोड के लिए अपने घटक संरचना के अनुसार सबसे उपयुक्त विधि चुनें।