रिएक्ट नेटिव फ्लेक्सबॉक्स में 100% चौड़ाई

Question

मैंने पहले ही कई फ्लेक्सबॉक्स ट्यूटोरियल पढ़ लिए हैं, लेकिन मैं अभी भी काम करने के लिए यह सरल कार्य नहीं कर सकता।

मैं लाल बॉक्स को 100% चौड़ाई में कैसे बना सकता हूं?

कोड:

  <View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to React Natives
    </Text>
    <Text style={styles.line1}>
      line1
    </Text>
    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
  </View>

अंदाज:

container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#F5FCFF',
  borderWidth: 1,
  flexDirection: 'column',
},
welcome: {
  fontSize: 20,
  textAlign: 'center',
  margin: 10,
  borderWidth: 1,
},
line1: {
    backgroundColor: '#FDD7E4',
},
instructions: {
  textAlign: 'center',
  color: '#333333',
  marginBottom: 5,
  borderWidth: 1,
},

धन्यवाद!

अपडेट 1: निशांत शंकर द्वारा सुझाव, फ्लेक्स जोड़ने: 1 आवरण के लिए, flexDirection: 'पंक्ति'

आउटपुट:

कोड:

  <View style={styles.container}>
    <View style={{flex:1}}>
      <Text style={styles.welcome}>
        Welcome to React Natives
      </Text>
    </View>
    <View style={{flex:1}}>
      <Text style={styles.line1}>
        line1
      </Text>
    </View>
    <View style={{flex:1}}>
      <Text style={styles.instructions}>
        Press Cmd+R to reload,{'\n'}
        Cmd+D or shake for dev menu
      </Text>
    </View>
  </View>

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    borderWidth: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    borderWidth: 1,
  },
  line1: {
      backgroundColor: '#FDD7E4',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    borderWidth: 1,
  },

Answer 1

बस alignSelf: "stretch"अपने आइटम की स्टाइलशीट में जोड़ें ।

line1: {
    backgroundColor: '#FDD7E4',
    alignSelf: 'stretch',
    textAlign: 'center',
},

Comments

लिंक टूट गया है।

— लुकास नुथ

संरेखित खिंचाव का उपयोग करते हुए, मेरे पास एंड्रॉइड के साथ एक मुद्दा था - मेरे पास 'पूर्ण' स्थिति के साथ एक छवि थी और इस मामले में, यहां तक ​​कि 'खिंचाव' का उपयोग करते हुए, इस तरह के बॉक्स को भीतर निहित तत्वों के किनारे पर रखा जाता है। डाइमेंशन्स.get ('विंडो')। चौड़ाई ने मेरे मामले में iOS और Android दोनों पर काम किया।

— st_bk

इस तरह से मेरी सभी 'पूर्ण चौड़ाई' की समस्याओं का हल हो गया, इसे देखें: snack.expo.io/S1PWQqkcZ

— webdevinci

ऐसा लगता है कि width: "100%"यह भी काम करना चाहिए, लेकिन ऐसा नहीं है। मुझे लगता है कि जब मुझे समझ नहीं आता alignSelf: "stretch"बनाम काम करता है width: "100%"। @ कोई विचार है? धन्यवाद!

— जोएल

@st_bk वहाँ एक जीवन रक्षक था! हालाँकि, मुझे इस घटना के लिए एक बेहतर समाधान मिला कि आप बिल्कुल स्थिति में हैं और इसे फैलाने की जरूरत है:position: absolute, top: 0, bottom: 0, left: 0, right: 0

— lance.dolan

Answer 2

आपको आयामों का उपयोग करना चाहिए

सबसे पहले, आयाम परिभाषित करें।

import { Dimensions } from "react-native";

var width = Dimensions.get('window').width; //full width
var height = Dimensions.get('window').height; //full height

फिर, line1नीचे की तरह शैली बदलें :

line1: {
    backgroundColor: '#FDD7E4',
    width: width,
},

Comments

Thx Melih Mucuk! संरेखण: कोरेंटिन एस द्वारा सुझाया गया "खिंचाव" सबसे आसान और सरल है इसलिए मैंने उस उत्तर को स्वीकार किया। हालाँकि, आयाम होने से मुझे लेआउट के चारों ओर खेलने का एक नया तरीका मिल जाता है। कुछ मामलों में, हम आइटम को प्रोग्रामेटिक रूप से समायोजित कर सकते हैं, धन्यवाद!

— फ्रैंकफर्ट

@ मुझे लगता है कि मेरे Android डिवाइस पर लौटी चौड़ाई गलत है। सही चौड़ाई 720px होनी चाहिए, लेकिन 360px रिटर्न।

— शांति यात्रा

@psypassion, आपको 360 मिला है, क्योंकि आपके डिवाइस का डीपीआई 2 एक्स है। कोशिश करें Dimensions.get('window').scale- यह आपके मामले में 2 वापस आना चाहिए।

— मटौर

आपके उत्तर के लिए धन्यवाद, मैं एक पृष्ठभूमि के साथ एक कंटेनर के साथ काम कर रहा हूं और आपका सुझाव पूरी तरह से फिट बैठता है।

— clearenswd

डिवाइस घुमाए जाने पर यह काम नहीं करेगा। अनुकूली लेआउट का उपयोग करना बेहतर है।

— Laynemoseley

Answer 3

उसे संपादित:

केवल केंद्र पाठ को फ्लेक्स करने के लिए, एक अलग दृष्टिकोण लिया जा सकता है - अन्य विचारों को अनफ्लेक्स करें।

• FlexDirection को 'कॉलम' पर बने रहने दें
• alignItems : 'center'कंटेनर से निकालें
• alignSelf:'center'उन टेक्स्टव्यू में जोड़ें जिन्हें आप फ्लेक्स नहीं करना चाहते हैं

आप पाठ घटक को एक दृश्य घटक में लपेट सकते हैं और दृश्य को 1 का फ्लेक्स दे सकते हैं।

फ्लेक्स देगा:

अगर flexDirection:'row'शैलियों में 100% चौड़ाई

अगर flexDirection:'column'शैलियों में 100% ऊंचाई

Comments

हां, मैंने flexDirection: 'row' और flex: 1 को सेट करने का प्रयास किया ताकि चौड़ाई 100% हो जाए। हालांकि, घटक सभी इनलाइन हैं और अगली पंक्ति में नहीं जा सकते हैं। यहां तक ​​कि मैंने फ्लेक्सवैप का इस्तेमाल किया: 'रैप'

— फ्रेंफ्रन

नई विधि के साथ कोई भाग्य?

— निशांत शंकर

संरेखण: कोरेंटिन एस द्वारा सुझाए गए 'खिंचाव' काम करता है।

— फ्रैंकफर्ट

Answer 4

हेयर यू गो:

बस नीचे के अनुसार लाइन 1 शैली बदलें:

line1: {
    backgroundColor: '#FDD7E4',
    width:'100%',
    alignSelf:'center'
}

Answer 5

चौड़ाई और ऊंचाई पाने के लिए जावास्क्रिप्ट का उपयोग करें और उन्हें व्यू की शैली में जोड़ें। पूरी चौड़ाई और ऊंचाई पाने के लिए, https://facebook.github.io/react-native/docs/dimensions.html का उपयोग Dimensions.get('window').width करें

getSize() {
    return {
        width: Dimensions.get('window').width, 
        height: Dimensions.get('window').height
    }
}

और फिर,

<View style={[styles.overlay, this.getSize()]}>

Comments

ऊह, मुझे यह पसंद है। संभवतः सबसे अच्छा समाधान नहीं है लेकिन इसने मेरी समस्या को हल कर दिया है। यह उल्लेख नहीं है कि यह सामान्य रूप से एक बहुत साफ काम है।

— केविन 21sterkilde

Answer 6

सबसे पहले आयाम घटक जोड़ें:

import { AppRegistry, Text, View,Dimensions } from 'react-native';

दूसरा परिभाषित चर:

var height = Dimensions.get('window').height;
var width = Dimensions.get('window').width;

तीसरे ने इसे अपनी स्टाइलशीट में डाला:

textOutputView: {
    flexDirection:'row',
    paddingTop:20,
    borderWidth:1,
    borderColor:'red',
    height:height*0.25,
    backgroundColor:'darkgrey',
    justifyContent:'flex-end'
}

वास्तव में इस उदाहरण में मैं प्रतिक्रियात्मक दृश्य बनाना चाहता था और केवल 0.25 स्क्रीन दृश्य देखना चाहता था, इसलिए मैंने इसे 0.25 से गुणा किया, यदि आप चाहते थे कि 100% स्क्रीन इस तरह से किसी भी चीज से गुणा न करें:

textOutputView: {
    flexDirection:'row',
    paddingTop:20,
    borderWidth:1,
    borderColor:'red',
    height:height,
    backgroundColor:'darkgrey',
    justifyContent:'flex-end'
}

Answer 7

प्रख्यात: फ्लेक्स अवधारणा के बारे में पूरी तरह से समझने की कोशिश करें।

       <View style={{
          flex: 2,
          justifyContent: 'center',
          alignItems: 'center'
        }}>
          <View style ={{
              flex: 1,
              alignItems: 'center, 
              height: 50, 
              borderWidth: 1, 
              borderColor: '#000' 
          }}>
               <Text>Welcome to React Nativ</Text>
           </View>
           <View style={{
              flex: 1,
              alignItems: 'center,
              borderWidth: 1, 
              borderColor: 'red ', 
              height: 50
            }}
            >
              <Text> line 1 </Text>
            </View>
          <View style={{
            flex: 1,
            alignItems: 'center, 
            height: 50, 
            borderWidth: 1,                     
            borderColor: '#000'
          }}>
             <Text>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
             </Text>
           </View>
       </View>

Answer 8

बस को निकालने के alignItems: 'center'कंटेनर शैलियों में और जोड़ने textAlign: "center"के लिए line1नीचे दिए गए की तरह शैली।

यह अच्छी तरह से काम करेगा

container: {
  flex: 1,
  justifyContent: 'center',
  backgroundColor: '#F5FCFF',
  borderWidth: 1,
}

line1: {
    backgroundColor: '#FDD7E4',
    textAlign:'center'
},

Answer 9

Style ={{width : "100%"}}

इसे इस्तेमाल करे:

StyleSheet generated: {
  "width": "80%",
  "textAlign": "center",
  "marginTop": 21.8625,
  "fontWeight": "bold",
  "fontSize": 16,
  "color": "rgb(24, 24, 24)",
  "fontFamily": "Trajan Pro",
  "textShadowColor": "rgba(255, 255, 255, 0.2)",
  "textShadowOffset": {
    "width": 0,
    "height": 0.5
  }
}

Comments

कृपया प्रश्न का उचित उत्तर दें। पहले यहां बताए बिना एक लिंक प्रदान न करें कि यह किस बारे में है।

— एकैस्टीफे

Answer 10

width: '100%'और alignSelf: 'stretch'मेरे लिए काम नहीं किया। Dimensionsमेरे कार्य को सूट नहीं किया क्योंकि मुझे एक गहरी नेस्टेड दृश्य पर काम करने की आवश्यकता थी। यहां मेरे लिए काम किया है, अगर मैं आपके कोड को फिर से लिखता हूं। मैंने आवश्यक लेआउट को प्राप्त करने के लिए बस कुछ और Viewएस और उपयोग किए गए flexगुणों को जोड़ा :

  {/* a column */}
  <View style={styles.container}>
    {/* some rows here */}
    <Text style={styles.welcome}>
      Welcome to React Natives
    </Text>
    {/* this row should take all available width */}
    <View style={{ flexDirection: 'row' }}>
      {/* flex 1 makes the view take all available width */}
      <View style={{ flex: 1 }}>
        <Text style={styles.line1}>
          line1
        </Text>
      </View>
      {/* I also had a button here, to the right of the text */}
    </View>
    {/* the rest of the rows */}
    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
  </View>