আপনি কীভাবে ভাসতে পারবেন: সরাসরি নেটিভ এ?

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ডিফল্ট হিসাবে একটি একটি ইনলাইন উপাদান Re রিঅ্যাক্ট নেটিভ এ জাতীয় ধারণা নেই))

পাঠ্যটি কীভাবে ডানদিকে প্রবাহিত / প্রসারিত করা যায়?

floatসম্পত্তিতে দেশীয় প্রতিক্রিয়া না অস্তিত্ব, কিন্তু আছে লোড উপলব্ধ অপশন আপনাকে (কিছুটা ভিন্ন আচরণে সঙ্গে) আপনি আপনার লেখা ডান-সারিবদ্ধ দিন করবে। আমি এখানে ভাবতে পারি সেগুলি এখানে:

1. উপাদান ব্যবহার textAlign: 'right'করুনText

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

(এই পদ্ধতির Textপুরো প্রশস্ততা পূরণ করে যে সত্যটি পরিবর্তন করে না View; এটি কেবল লেখার মধ্যে পাঠ্যকে ডান-প্রান্তিককরণ করে s 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 এ এই পদ্ধতির প্রদর্শন করা হয় ।

Use. ব্যবহার করুন 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

উত্তরের জন্য ধন্যবাদ @ মার্ক আমেরিকা! আমি পঞ্চম (পঞ্চম) পদ্ধতির পছন্দ করি কেননা আমি ভিউ / ধারকের উচ্চতার জন্য এটি স্বয়ংক্রিয় আকারের হিসাবে স্থির সেট করতে পছন্দ করি না।

— মনিরো জ্যানিটন

4 নং আমার জন্য একটি ট্রিট কাজ করেছে। আমি সন্দেহ করি যে কারও সমস্যা রয়েছে তা দেখার কীভাবে কী আছে তা দেখার দরকার রয়েছে যা এতে শিশু উপাদানগুলির ফ্লেক্স বিন্যাসে প্রভাব ফেলতে পারে।

— তাহির খালিদ

Answer 2

আপনি সরাসরি আইটেমের প্রান্তিককরণ নির্দিষ্ট করতে পারেন, উদাহরণস্বরূপ:

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

Comments

@ গুডনাইসওয়েব আপনি বিভ্রান্ত; সেখানে হয় দেশীয় প্রতিক্রিয়া কোন ইনলাইন উপাদান। একমাত্র বৈধ displayমানগুলি 'flex'এবং 'none'।

— মার্ক

Answer 3

আমার alignItemsপিতামাতার সাথে সেট করার জন্য কৌশলটি করেছেন, যেমন:

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

Answer 4

আপনার প্রতিক্রিয়া নেটিভ তে ভাসা ব্যবহার করার কথা নয়। প্রতিক্রিয়া নেটিভ সমস্ত জিনিস হ্যান্ডেল করার জন্য ফ্লেক্সবক্সকে কাজে দেয়।

আপনার ক্ষেত্রে, আপনি সম্ভবত ধারকটির একটি বৈশিষ্ট্য থাকতে চান

justifyContent: 'flex-end'

এবং পুরো স্থানটি গ্রহণ করা পাঠ্য সম্পর্কে, আবার আপনার পাত্রে একবার নজর দেওয়া দরকার।

এখানে ফ্লেক্সবক্সের সত্যিকারের দুর্দান্ত গাইডের লিঙ্ক: ফ্লেক্সবক্সের একটি সম্পূর্ণ গাইড

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#flex- দিকনির্দেশ

Comments

এটি কেবলমাত্র এমন একটি পদ্ধতির পুনরাবৃত্তি করেছে যা আমি ইতিমধ্যে পোস্ট করেছি (এটি আমার উত্তরের বিকল্প 4 ) এবং আমি কোনও অতিরিক্ত মান দেখতে পাচ্ছি না।

— মার্ক আমেরিকা