উত্তর:
পাঠ্যটি কেন "হ্যালো" এর জন্য কেবল স্থানের পরিবর্তে দৃশ্যের পুরো স্থান গ্রহণ করে?
কারণ এটি View
একটি ফ্লেক্স ধারক এবং ডিফল্টরূপে রয়েছে flexDirection: 'column'
এবং alignItems: 'stretch'
যার অর্থ এর বাচ্চাদের প্রস্থ পূরণ করার জন্য প্রসারিত করা উচিত।
(দ্রষ্টব্য প্রতি ডক্স , যে সব প্রতিক্রিয়া দেশীয় মধ্যে উপাদান display: 'flex'
ডিফল্ট দ্বারা এবং display: 'inline'
এ সব কোন অস্তিত্ব নেই এই ভাবে, একটি ডিফল্ট আচরণ। Text
একটি মধ্যে View
মধ্যে ডিফল্ট আচরণ থেকে দেশীয় পৃথক প্রতিক্রিয়া span
একটি মধ্যে div
ওয়েবে; পরবর্তী ক্ষেত্রে, স্প্যানটি প্রস্থটি পূরণ করতে পারে নাdiv
কারণ span
ডিফল্ট হিসাবে একটি একটি ইনলাইন উপাদান Re রিঅ্যাক্ট নেটিভ এ জাতীয় ধারণা নেই))
পাঠ্যটি কীভাবে ডানদিকে প্রবাহিত / প্রসারিত করা যায়?
float
সম্পত্তিতে দেশীয় প্রতিক্রিয়া না অস্তিত্ব, কিন্তু আছে লোড উপলব্ধ অপশন আপনাকে (কিছুটা ভিন্ন আচরণে সঙ্গে) আপনি আপনার লেখা ডান-সারিবদ্ধ দিন করবে। আমি এখানে ভাবতে পারি সেগুলি এখানে:
textAlign: 'right'
করুনText
<View>
<Text style={{textAlign: 'right'}}>Hello, World!</Text>
</View>
(এই পদ্ধতির Text
পুরো প্রশস্ততা পূরণ করে যে সত্যটি পরিবর্তন করে না View
; এটি কেবল লেখার মধ্যে পাঠ্যকে ডান-প্রান্তিককরণ করে s Text
)
alignSelf: 'flex-end'
উপর ব্যবহার করুনText
<View>
<Text style={{alignSelf: 'flex-end'}}>Hello, World!</Text>
</View>
এটি Text
উপাদানটিকে ধারণ করার জন্য প্রয়োজনীয় আকারটিকে সঙ্কুচিত করে এবং এর ক্রস দিকের (অনুভূমিক দিকনির্দেশ, পূর্বনির্ধারিত) শেষে রেখে দেয় View
।
alignItems: 'flex-end'
করুনView
<View style={{alignItems: 'flex-end'}}>
<Text>Hello, World!</Text>
</View>
এটি alignSelf: 'flex-end'
সমস্ত View
বাচ্চাদের উপর সেট করার সমতুল্য ।
flexDirection: 'row'
এবং justifyContent: 'flex-end'
এView
<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
<Text>Hello, World!</Text>
</View>
flexDirection: 'row'
বিন্যাসের মূল দিকটি উলম্বের পরিবর্তে অনুভূমিক হতে সেট করে; justifyContent
ঠিক যেমন alignItems
, তবে ক্রস দিকের পরিবর্তে মূল দিকের প্রান্তিককরণ নিয়ন্ত্রণ করে।
flexDirection: 'row'
উপর View
এবং marginLeft: 'auto'
উপরText
<View style={{flexDirection: 'row'}}>
<Text style={{marginLeft: 'auto'}}>Hello, World!</Text>
</View>
ওয়েব এবং আসল সিএসএসের প্রসঙ্গে https://stackoverflow.com/a/34063808/1709587 এ এই পদ্ধতির প্রদর্শন করা হয় ।
position: 'absolute'
এবং right: 0
এতে Text
:<View>
<Text style={{position: 'absolute', right: 0}}>Hello, World!</Text>
</View>
বাস্তব সিএসএসের মতো Text
এটিও "প্রবাহের বাইরে চলে যায়" যার অর্থ এটি হয় যে তার ভাইবোনরা এটির ওভারল্যাপ করতে সক্ষম হবে এবং এর উল্লম্ব অবস্থানটি View
ডিফল্টরূপে শীর্ষে থাকবে (যদিও আপনি স্পষ্টতই শীর্ষের থেকে একটি দূরত্ব নির্ধারণ করতে পারবেন) শৈলীর সম্পত্তি View
ব্যবহার করে top
)।
স্বভাবতই, আপনি ব্যবহার করতে চান এই বিভিন্ন পদ্ধতির মধ্যে - এবং তাদের মধ্যে পছন্দ এমনকি আদৌ গুরুত্বপূর্ণ কিনা - আপনার সুনির্দিষ্ট পরিস্থিতিতে নির্ভর করবে।
<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>
।
আপনার প্রতিক্রিয়া নেটিভ তে ভাসা ব্যবহার করার কথা নয়। প্রতিক্রিয়া নেটিভ সমস্ত জিনিস হ্যান্ডেল করার জন্য ফ্লেক্সবক্সকে কাজে দেয়।
আপনার ক্ষেত্রে, আপনি সম্ভবত ধারকটির একটি বৈশিষ্ট্য থাকতে চান
justifyContent: 'flex-end'
এবং পুরো স্থানটি গ্রহণ করা পাঠ্য সম্পর্কে, আবার আপনার পাত্রে একবার নজর দেওয়া দরকার।
এখানে ফ্লেক্সবক্সের সত্যিকারের দুর্দান্ত গাইডের লিঙ্ক: ফ্লেক্সবক্সের একটি সম্পূর্ণ গাইড
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
<Text>
Some Text
</Text>
</View>
flexDirection
: আপনি যদি অনুভূমিকভাবে (সারি) বা উল্লম্বভাবে (কলাম) সরাতে চান
justifyContent
: আপনি যে দিকে যেতে চান সেই দিক।
justifyContent
কোনও দিক পছন্দ করে না ; এটি কীভাবে জিনিসকে স্থিত করে এবং প্রধান ফ্লেক্সের দিকের ব্যবধানে ব্যবধান করা হয় সে সম্পর্কে একগুচ্ছ বিকল্পের অফার দেয়।
আপনি ভাসা করতে পারেন: ফ্লেক্স ব্যবহার করে সরাসরি নেটিভ প্রতিক্রিয়া:
<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- দিকনির্দেশ
justifyContent
,alignItems
,alignSelf
। আমি ভাবছি যা সঠিক।