คุณจะลอยได้อย่างไร: อยู่ที่ React Native?

ฉันมีองค์ประกอบที่ฉันต้องการลอยตัวอย่างถูกต้อง

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

วิธีที่สามารถTextลอย / สอดคล้องกับที่เหมาะสมหรือไม่ นอกจากนี้ทำไมการTextใช้พื้นที่ทั้งหมดของViewแทนที่จะเป็นพื้นที่สำหรับ "Hello"

เหตุใดข้อความจึงใช้พื้นที่ทั้งหมดของมุมมองแทนที่จะเป็นพื้นที่สำหรับ "Hello"

เนื่องจากViewเป็นคอนเทนเนอร์แบบยืดหยุ่นและโดยค่าเริ่มต้นมีflexDirection: 'column'และalignItems: 'stretch'ซึ่งหมายความว่าลูกควรยืดออกเพื่อเติมความกว้าง

(หมายเหตุสำหรับเอกสารนั้นส่วนประกอบทั้งหมดใน React Native นั้นเป็นdisplay: 'flex'ค่าเริ่มต้นและdisplay: 'inline'ไม่มีอยู่จริงด้วยวิธีนี้พฤติกรรมเริ่มต้นของTextภายใน a Viewใน React Native จะแตกต่างจากพฤติกรรมเริ่มต้นของspanภายในdivเว็บ ในกรณีหลังการขยายจะไม่เติมความกว้างของdiva เนื่องจาก a spanเป็นองค์ประกอบอินไลน์ตามค่าเริ่มต้นไม่มีแนวคิดดังกล่าวใน React Native)

ข้อความสามารถลอย / จัดแนวไปทางขวาได้อย่างไร

floatคุณสมบัติไม่อยู่ใน React พื้นเมือง แต่มีโหลดของตัวเลือกที่มีให้คุณ (ที่มีพฤติกรรมแตกต่างกันเล็กน้อย) ที่จะช่วยให้คุณขวาจัดข้อความของคุณ นี่คือสิ่งที่ฉันคิดได้:

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>

วิธีการนี้จะแสดงให้เห็นในบริบทของเว็บและ CSS จริงที่https://stackoverflow.com/a/34063808/1709587

6. ใช้position: 'absolute'และright: 0บนText:

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

เช่นเดียวกับ CSS จริงนี่ใช้Text"out of flow" ซึ่งหมายความว่าพี่น้องของมันจะสามารถซ้อนทับกันและตำแหน่งแนวตั้งจะอยู่ด้านบนสุดของการViewเริ่มต้น (แม้ว่าคุณสามารถกำหนดระยะห่างจากด้านบนของViewใช้topคุณสมบัติรูปแบบ)

ตามธรรมชาติซึ่งวิธีการต่าง ๆ เหล่านี้ที่คุณต้องการใช้ - และตัวเลือกระหว่างพวกเขามีความสำคัญหรือไม่นั้นขึ้นอยู่กับสถานการณ์ที่แน่นอนของคุณ

คุณสามารถระบุการจัดตำแหน่งรายการได้โดยตรงตัวอย่างเช่น:

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

สำหรับฉันการตั้งค่าalignItemsให้กับผู้ปกครองได้หลอกลวงเช่น:

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

คุณไม่ควรใช้ Float ใน React Native React Native ใช้ประโยชน์จาก flexbox เพื่อจัดการกับทุกสิ่งนั้น

ในกรณีของคุณคุณอาจต้องการให้คอนเทนเนอร์มีแอตทริบิวต์

justifyContent: 'flex-end'

และเกี่ยวกับข้อความที่ใช้พื้นที่ทั้งหมดอีกครั้งคุณต้องดูที่คอนเทนเนอร์ของคุณ

นี่คือลิงค์สำหรับคำแนะนำที่ดีเยี่ยมเกี่ยวกับ flexbox: คู่มือฉบับสมบูรณ์สำหรับ Flexbox

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

flexDirection: หากคุณต้องการเลื่อนในแนวนอน (แถว) หรือแนวตั้ง (คอลัมน์)

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-direction