आप कैसे तैर सकते हैं: सही रिएक्टिव नेटिव में?

Question

मेरे पास एक तत्व है जिसे मैं सही फ्लोट करना चाहता हूं, उदाहरण के लिए

<View style={{width: 300}}>
  <Text style={{backgroundColor: "#DDD"}}>Hello</Text>
</View>

Textफ़्लोट / दायीं ओर संरेखित कैसे किया जा सकता है? इसके अलावा, "हैलो" के लिए केवल स्थान के बजाय, Textका पूरा स्थान क्यों लेता है View?

Comments

मुझे आश्चर्य है कि अगर आपको एक उत्तर मिला क्योंकि शीर्ष 3 उत्तर सभी 3 अलग शैली विशेषताओं का उपयोग करने के लिए कहते हैं! justifyContent, alignItems, alignSelf। मुझे आश्चर्य है कि कौन सा सही है।

Answer 1

पाठ "हैलो" के लिए केवल स्थान के बजाय व्यू का पूरा स्थान क्यों लेता है?

क्योंकि Viewएक फ्लेक्स कंटेनर है और डिफ़ॉल्ट रूप से flexDirection: 'column'और alignItems: 'stretch', जिसका अर्थ है कि इसके बच्चों को इसकी चौड़ाई भरने के लिए बढ़ाया जाना चाहिए।

(ध्यान दें, प्रति डॉक्स , कि सब प्रतिक्रिया मूल निवासी में घटक हैं display: 'flex'कि डिफ़ॉल्ट रूप से और display: 'inline'सब पर मौजूद नहीं है इस तरह, एक के डिफ़ॉल्ट व्यवहार को। Textएक के भीतर Viewमें के डिफ़ॉल्ट व्यवहार से मूल निवासी अलग प्रतिक्रिया spanएक के भीतर divवेब पर; बाद के मामले में, यह अवधि चौड़ाई को नहीं भरेगी divक्योंकि spanडिफ़ॉल्ट रूप से एक इनलाइन तत्व है। रिएक्ट नेटिव में ऐसी कोई अवधारणा नहीं है।)

पाठ को कैसे दाएं / संरेखित किया जा सकता है?

floatसंपत्ति में मूल निवासी प्रतिक्रिया नहीं है मौजूद हैं, लेकिन देखते हैं भार उपलब्ध विकल्पों में से आप के लिए (थोड़ा अलग व्यवहार के साथ) आप अपने पाठ को राइट-संरेखित देंगे। यहाँ मैं के बारे में सोच सकते हैं:

1. तत्व textAlign: 'right'पर प्रयोग करेंText

<View>
  <Text style={{textAlign: 'right'}}>Hello, World!</Text>
</View>

(यह दृष्टिकोण इस तथ्य को नहीं बदलता है कि यह Textसंपूर्ण चौड़ाई को भरता है View; यह केवल पाठ को सही-संरेखित करता है Text)।

2. alignSelf: 'flex-end'परText

<View>
  <Text style={{alignSelf: 'flex-end'}}>Hello, World!</Text>
</View>

यह Textअपनी सामग्री को रखने के लिए आवश्यक आकार के तत्व को सिकोड़ता है और इसे क्रॉस दिशा (क्षैतिज दिशा, डिफ़ॉल्ट रूप से) के अंत में रखता है View।

3. उपयोग alignItems: 'flex-end'परView

<View style={{alignItems: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

यह alignSelf: 'flex-end'सभी Viewबच्चों पर सेट करने के बराबर है ।

4. का उपयोग करें flexDirection: 'row'और justifyContent: 'flex-end'परView

<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

flexDirection: 'row'ऊर्ध्वाधर के बजाय क्षैतिज होने की मुख्य दिशा सेट करता है; justifyContentजैसा है alignItems, लेकिन क्रॉस दिशा के बजाय मुख्य दिशा में संरेखण को नियंत्रित करता है।

5. flexDirection: 'row'पर Viewऔर marginLeft: 'auto'पर का उपयोग करेंText

<View style={{flexDirection: 'row'}}>
  <Text style={{marginLeft: 'auto'}}>Hello, World!</Text>
</View>

यह दृष्टिकोण वेब और वास्तविक सीएसएस के संदर्भ में, https://stackoverflow.com/a/34063808/1709587 पर प्रदर्शित किया गया है ।

6. का प्रयोग करें position: 'absolute'और right: 0पर Text:

<View>
  <Text style={{position: 'absolute', right: 0}}>Hello, World!</Text>
</View>

वास्तविक सीएसएस की तरह, यह Text"प्रवाह से बाहर" लेता है , जिसका अर्थ है कि उसके भाई-बहन इसे ओवरलैप करने में सक्षम होंगे और इसकी ऊर्ध्वाधर स्थिति Viewडिफ़ॉल्ट रूप से सबसे ऊपर होगी (हालांकि आप स्पष्ट रूप से शीर्ष के ऊपर से दूरी तय कर सकते हैं। शैली संपत्ति Viewका उपयोग करते हुए top)।

---

स्वाभाविक रूप से, इन विभिन्न दृष्टिकोणों में से आप किसका उपयोग करना चाहते हैं - और क्या उनके बीच का विकल्प भी बिल्कुल मायने रखता है - आपकी सटीक परिस्थितियों पर निर्भर करेगा।

Comments

इनमें से कोई भी समाधान काम नहीं करता है। :( मेरा लक्ष्य एक कैप्शन फ़्लोट करना था, और फिर बाईं ओर से आने वाला पाठ इसके चारों ओर चला जाएगा। इस तरह - stackoverflow.com/q/19179424/1828637 - तो मैं यह करने की उम्मीद कर रहा था: <Text><Text>FLOAT TEXT</Text>multi line text here which wraps around float textया उसी तरह की छवि के साथ। इस: <View><Text><Image />multi line text which wrap around float image</Text>।

— Noitidart

जवाब @Mark Amery के लिए धन्यवाद! मैं वास्तव में पांचवें (5 वें) दृष्टिकोण को पसंद करता हूं क्योंकि मैं ऑटो / आकार के रूप में दृश्य / कंटेनर की ऊंचाई के लिए एक निरंतर सेट करना पसंद नहीं करता।

— मोनरो जीनिटॉन

नंबर 4 ने मेरे लिए एक इलाज का काम किया। मुझे लगता है कि किसी को भी इस मुद्दे को देखने की जरूरत है कि इसमें किस तरह के दृश्य शामिल हैं, यह बाल तत्वों के फ्लेक्स लेआउट पर असर डाल सकता है।

— ताहिर खालिद

Answer 2

आप सीधे आइटम के संरेखण को निर्दिष्ट कर सकते हैं, उदाहरण के लिए:

textright: {    
  alignSelf: 'flex-end',  
},

Comments

@goodniceweb आप भ्रमित हैं; वहाँ रहे हैं मूल निवासी प्रतिक्रिया में कोई इनलाइन तत्वों। केवल मान्य displayमान हैं 'flex'और 'none'।

— मार्क ऐमी

Answer 3

मेरे alignItemsलिए माता-पिता से सेटिंग करने की कोशिश की, जैसे:

var styles = StyleSheet.create({
  container: {
    alignItems: 'flex-end'
  }
});

Answer 4

आप अभिक्रिया मूल में तैरने का उपयोग करने वाले नहीं हैं। React Native उस सभी सामान को संभालने के लिए flexbox का लाभ उठाता है।

आपके मामले में, आप शायद यह चाहेंगे कि कंटेनर में एक विशेषता हो

justifyContent: 'flex-end'

और पाठ को पूरे स्थान पर ले जाने के बारे में, फिर से, आपको अपने कंटेनर पर एक नज़र डालने की आवश्यकता है।

यहाँ flexbox पर वास्तव में महान गाइड के लिए एक कड़ी है: Flexbox के लिए एक पूर्ण गाइड

Answer 5

<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
  <Text>
  Some Text
  </Text>
</View>

flexDirection: यदि आप क्षैतिज (पंक्ति) या लंबवत (स्तंभ) ले जाना चाहते हैं

justifyContent: आप जिस दिशा में बढ़ना चाहते हैं।

Comments

थोड़ा भ्रामक; प्रति दिशाjustifyContent एक दिशा का चयन नहीं करता है; यह मुख्य फ्लेक्स दिशा के साथ चीजों को कैसे तैनात और स्थान दिया जाता है, इसके बारे में विकल्पों का एक गुच्छा प्रदान करता है।

— मार्क एमी

Answer 6

आप फ्लोट कर सकते हैं: फ्लेक्स का उपयोग करते हुए मूल निवासी में सही:

 <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>

अधिक विवरण के लिए: https://facebook.github.io/react-native/docs/flexbox.html#free-bion

Comments

यह सिर्फ एक दृष्टिकोण दोहराता है जो मैंने पहले ही पोस्ट किया था (यह मेरे उत्तर में विकल्प 4 है ) और मुझे कोई जोड़ा मूल्य नहीं दिखता है।

— मार्क एमी