রিএ্যাক্ট নেটিভ ফ্লেক্সবক্সে 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 যোগ করুন, দিকনির্দেশ: 'সারি'

আউটপুট:

কোড:

  <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

লিঙ্কটি নষ্ট হয়ে গেছে।

— লুকাশ নুথ

অ্যালাইনসেল্ফ স্ট্র্যাচ ব্যবহার করে, আমার অ্যান্ড্রয়েডের সাথে একটি সমস্যা ছিল - আমার কাছে 'পরম' অবস্থানের সাথে একটি চিত্র ছিল এবং এই ক্ষেত্রে এমনকি 'প্রসারিত' ব্যবহার করে, এই জাতীয় বাক্সটি অন্তর্ভুক্ত উপাদানগুলির প্রান্তে প্যাড হয়ে যায়। ডাইমেনশনস.জেট ('উইন্ডো')। প্রস্থ আমার ক্ষেত্রে আইওএস এবং অ্যান্ড্রয়েড উভয় ক্ষেত্রেই কাজ করে।

— st_bk

এই এক উপায়ে আমার সমস্ত 'পূর্ণ প্রস্থ' সমস্যার সমাধান হয়েছে, এটি পরীক্ষা করে দেখুন: snack.expo.io/S1PWQqkcZ

— ওয়েবদেবচি

দেখে মনে হচ্ছে 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 মেলিহ মিউকুক! অ্যালাইনসেল্ফ: কোরেনটিন এস দ্বারা প্রস্তাবিত "প্রসারিত" হ'ল সবচেয়ে সহজ এবং সহজ তাই আমি এই উত্তরটি গ্রহণ করেছি। তবে, মাত্রা থাকা আমাকে বিন্যাসের চারপাশে খেলার জন্য একটি নতুন পথে নিয়ে যায়। কিছু ক্ষেত্রে, আমরা আইটেমগুলিকে প্রোগ্রামগতভাবে সামঞ্জস্য করতে পারি, আপনাকে ধন্যবাদ!

— ফ্রানফ্রান

@ মেলিহ আমি দেখতে পেয়েছি প্রস্থটি ফিরে এসেছে আমার অ্যান্ড্রয়েড ডিভাইসে ভুল। ডান প্রস্থটি 720px হওয়া উচিত, তবে 360px প্রদান করে।

— শান্তিময়

@ স্পর্শকাতরতা, আপনি 360 পেয়েছেন, কারণ আপনার ডিভাইস ডিপিআই 2x স্কেল করা হয়েছে। চেষ্টা করুন Dimensions.get('window').scale- এটি আপনার ক্ষেত্রে 2 ফিরে আসবে।

— ম্যাথুসেলাম

আপনার উত্তরের জন্য ধন্যবাদ, আমি একটি পটভূমির সাথে একটি ধারক নিয়ে কাজ করছি এবং আপনার পরামর্শটি পুরোপুরি ফিট করে।

— ক্লারেন্সড ওয়ার্ল্ড

ডিভাইসটি ঘোরানোর সময় এটি কাজ করবে না। অভিযোজিত বিন্যাসটি ব্যবহার করা আরও ভাল।

— লেটেনমোসলে

Answer 3

Editted:

কেবলমাত্র কেন্দ্রের পাঠ্যকে নমনীয় করার জন্য, একটি ভিন্ন দৃষ্টিভঙ্গি নেওয়া যেতে পারে - অন্যান্য মতামতগুলি আনফ্লেক্স করুন।

• ফ্লেক্সের দিকনির্দেশটি 'কলামে' থাকুক
• alignItems : 'center'ধারক থেকে অপসারণ
• যোগ alignSelf:'center'textviews আপনি আনমন চাই না

আপনি একটি ভিউ উপাদানটিতে পাঠ্য উপাদানটি মোড়ানো করতে পারেন এবং ভিউটিকে 1 এর ফ্লেক্স দিতে পারেন।

ফ্লেক্সটি দেবে:

100% প্রস্থ যদি flexDirection:'row'স্টাইলস কন্টেইনার থাকে

100% উচ্চতা যদি flexDirection:'column'স্টাইলস কন্টেইনার থাকে

Comments

হ্যাঁ, আমি ফ্লেক্সের দিকনির্দেশ: 'সারি' এবং ফ্লেক্স: 1 সেট করার চেষ্টা করেছি যাতে প্রস্থটি 100% এ যায়। তবে উপাদানগুলি সমস্ত ইনলাইন এবং পরবর্তী লাইনে যেতে পারে না। এমনকি আমি ফ্লেক্সওয়্যার্প ব্যবহার করেছি: 'মোড়ানো'

— ফ্রানফ্রান

নতুন পদ্ধতি franfran সঙ্গে কোন ভাগ্য?

— নিশান্ত শঙ্কর

অ্যালাইনসেল্ফ: কোরেণ্টিন এস দ্বারা প্রস্তাবিত 'প্রসারিত' কাজ করে।

— ফ্রানফ্রান

Answer 4

আপনি এখানে যান:

কেবল নীচের মত লাইন 1 শৈলী পরিবর্তন করুন:

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

Answer 5

প্রস্থ এবং উচ্চতা পেতে জাভাস্ক্রিপ্ট ব্যবহার করুন এবং এটিকে দেখার শৈলীতে যুক্ত করুন। পূর্ণ প্রস্থ এবং উচ্চতা পেতে, https://facebook.github.io/react-native/docs/dimension.html ব্যবহার করুনDimensions.get('window').width

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

এবং তারপর,

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

Comments

ওহ, আমি এটি পছন্দ করি সম্ভবত সেরা সমাধান নয় তবে এটি আমার সমস্যার সমাধান করেছে। এটি সাধারণভাবে একটি সুন্দর ঝরঝরে ফাংশন তা উল্লেখ করার দরকার নেই।

— কেভিন আস্টারকিল্ড

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>