दृश्यमान रूप से आकर्षक और उपयोगकर्ता-अनुकूल React Native अनुप्रयोग बनाने के लिए टेक्स्ट अलाइनमेंट में महारत हासिल करना महत्वपूर्ण है। यह गाइड क्षैतिज और ऊर्ध्वाधर दोनों अलाइनमेंट को कवर करते हुए, टेक्स्ट पोजिशनिंग को सटीक रूप से नियंत्रित करने की तकनीकों का व्यापक अवलोकन प्रदान करता है।
विषयवस्तु की तालिका
- टेक्स्ट को केंद्र में रखना
- टेक्स्ट को दाईं ओर अलाइन करना
- ऊर्ध्वाधर टेक्स्ट अलाइनमेंट
- जटिल लेआउट को संभालना
टेक्स्ट को केंद्र में रखना
React Native में टेक्स्ट को केंद्र में रखने के लिए अलग-अलग तरीके शामिल हैं, यह इस बात पर निर्भर करता है कि आप सिंगल-लाइन या मल्टी-लाइन टेक्स्ट से निपट रहे हैं।
सिंगल-लाइन टेक्स्ट सेंट्रिंग
सिंगल-लाइन टेक्स्ट के लिए, सबसे सरल समाधान Text घटक के भीतर textAlign स्टाइल प्रॉप का उपयोग करना है:
<Text style={{ textAlign: 'center' }}>यह टेक्स्ट केंद्र में है।</Text>
मल्टी-लाइन टेक्स्ट सेंट्रिंग
मल्टी-लाइन टेक्स्ट को केंद्रित करने के लिए लेआउट को प्रबंधित करने के लिए View घटक की आवश्यकता होती है। हम justifyContent और alignItems का उपयोग करेंगे:
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>यह टेक्स्ट केंद्र में है</Text>
<Text>कई पंक्तियों में</Text>
</View>
justifyContent: 'center' View के भीतर सामग्री को लंबवत रूप से केंद्रित करता है, जबकि alignItems: 'center' इसे क्षैतिज रूप से केंद्रित करता है।
टेक्स्ट को दाईं ओर अलाइन करना
टेक्स्ट को दाईं ओर अलाइन करना केंद्रित करने के समान ही प्राप्त होता है, लेकिन textAlign: 'right' सेट करके:
<Text style={{ textAlign: 'right' }}>यह टेक्स्ट दाईं ओर अलाइन है।</Text>
यह Text और TextInput दोनों घटकों के लिए काम करता है।
ऊर्ध्वाधर टेक्स्ट अलाइनमेंट
React Native सीधे एक ही पंक्ति के टेक्स्ट के भीतर ऊर्ध्वाधर टेक्स्ट अलाइनमेंट का समर्थन नहीं करता है। किसी कंटेनर के भीतर ऊर्ध्वाधर सेंट्रिंग प्राप्त करने के लिए, आपको lineHeight गुण को कंटेनर की ऊंचाई के बराबर सेट करने जैसी तकनीकों का उपयोग करने की आवश्यकता होगी। सटीक ऊर्ध्वाधर पोजिशनिंग के लिए, तृतीय-पक्ष पुस्तकालयों या कस्टम घटकों का उपयोग करने पर विचार करें।
जटिल लेआउट को संभालना
जटिल लेआउट के लिए, Flexbox सिद्धांतों का लाभ उठाना और flex, justifyContent, alignItems और textAlign के विभिन्न संयोजनों के साथ प्रयोग करना महत्वपूर्ण है। अधिक जटिल व्यवस्था बनाने के लिए नेस्टेड View घटकों का उपयोग करने पर विचार करें।