আমার স্ক্রিনটি বন্ধ করে নেটিভ পাঠ্য প্রতিক্রিয়া জানানো, মোড়ানো অস্বীকার করে। কি করো?

Question

নিম্নলিখিত কোডটি এই লাইভ উদাহরণে পাওয়া যাবে

আমি নিম্নলিখিত প্রতিক্রিয়া স্থানীয় উপাদান পেয়েছি:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var SampleApp = React.createClass({
  render: function() {
    return      (
  <View style={styles.container}>

        <View style={styles.descriptionContainerVer}>
          <View style={styles.descriptionContainerHor}>
            <Text style={styles.descriptionText} numberOfLines={5} >
              Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..!
            </Text>
          </View>
        </View>

        <View style={styles.descriptionContainerVer2}>
          <View style={styles.descriptionContainerHor}>
            <Text style={styles.descriptionText} numberOfLines={5} >Some other long text which you can still do nothing about.. Off the screen we go then.</Text>
          </View>
        </View>



  </View>);
  }
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);

নিম্নলিখিত শৈলী সহ:

var styles = StyleSheet.create({
  container:{
        flex:1,
    flexDirection:'column',
        justifyContent: 'flex-start',
        backgroundColor: 'grey'
    },
    descriptionContainerVer:{
    flex:0.5, //height (according to its parent)
    flexDirection: 'column', //its children will be in a row
    alignItems: 'center',
    backgroundColor: 'blue',
    // alignSelf: 'center',
  },
  descriptionContainerVer2:{
    flex:0.5, //height (according to its parent)
    flexDirection: 'column', //its children will be in a row
    alignItems: 'center',
    backgroundColor: 'orange',
    // alignSelf: 'center',
  },
  descriptionContainerHor:{
    //width: 200, //I DON\'T want this line here, because I need to support many screen sizes
    flex: 0.3,  //width (according to its parent)
    flexDirection: 'column',    //its children will be in a column
    alignItems: 'center', //align items according to this parent (like setting self align on each item)
    justifyContent: 'center',
    flexWrap: 'wrap'
  },
  descriptionText: {
    backgroundColor: 'green',//Colors.transparentColor,
    fontSize: 16,
    color: 'white',
    textAlign: 'center',
    flexWrap: 'wrap'
  }
});

নিম্নলিখিত স্ক্রিনে এর ফলাফল:

আমি কীভাবে পাঠ্যটিকে স্ক্রিনে যেতে দেওয়া বন্ধ করতে পারি এবং পিতামাতার ৮০% প্রস্থের সাথে এটিকে পর্দার মাঝখানে সীমাবদ্ধ রাখতে পারি।

আমার মনে হয় না যে আমার ব্যবহার করা উচিত widthকারণ আমি এটি বিভিন্ন মোবাইল স্ক্রিনে চালিত করব এবং আমি এটি গতিশীল হতে চাই, তাই আমার মনে হয় আমার সম্পূর্ণ নির্ভর করা উচিত flexbox।

(এই প্রারম্ভিক কারণে আমি ছিল flex: 0.8মধ্যে descriptionContainerHor।

আমি যা অর্জন করতে চাই তা হ'ল:

ধন্যবাদ!

Answer 1

নীচের লিঙ্ক থেকে সমাধান পেয়েছি।

[পাঠ্য] পাঠ্য # 1438 মোড়ানো হয় না

<View style={{flexDirection:'row'}}> 
   <Text style={{flex: 1, flexWrap: 'wrap'}}> You miss fdddddd dddddddd 
     You miss fdd
   </Text>
</View>

আপনি তাকে ধন্যবাদ জানাতে চাইলে নীচে গিথুব প্রোফাইল ব্যবহারকারী লিঙ্কটি রয়েছে।

অ্যালি রিপলি

---

সম্পাদনা করুন: মঙ্গলবার এপ্রিল 09 2019

@ সুডোপ্লাজ মন্তব্যগুলিতে যেমন উল্লেখ করেছেন এটি flexShrink: 1এই উত্তরটি আপডেট করার সাথে কাজ করে ।

Comments

ধন্যবাদ, এটি দুর্দান্ত উত্তর, তবে আমি এটি চেষ্টা করেছি এবং কিছু কারণে এটি সর্বদা কার্যকর হয় না (কেন জানি না: এস)। রিএ্যাকটিভ-নেটিভ ক্ষেত্রে ফ্লেক্সওয়্যারপটি কিছুটা ঝাপটায়। +1 যদিও এটি আনার জন্য।

— সুডোপ্লিজ

^^^ এটি এখানে আসল উত্তর। এই বিকল্প গ্রহণ করুন!

— গ্রেগ ব্লাস

এই উত্তরটির তথ্য অংশটি কেবল নোট করুন github.com/facebook/react-native/issues/…

— SudoPlz

আমি আবিষ্কার করেছি যে কিছু ক্ষেত্রে flexShrink: 1পিতামাতার দৃশ্যে প্রয়োগ করাও সহায়তা করবে।

— SudoPlz

এইটা কাজ করে. ধন্যবাদ।

— উদ্দেশ_জাইন

Answer 2

এটি একটি পরিচিত বাগ । flexWrap: 'wrap'আমার পক্ষে কাজ করেনি তবে এই সমাধানটি বেশিরভাগ লোকের পক্ষে কাজ করে বলে মনে হচ্ছে

কোড

<View style={styles.container}>
    <Text>Some text</Text>
</View>

শৈলী

export default StyleSheet.create({
    container: {
        width: 0,
        flexGrow: 1,
        flex: 1,
    }
});

Comments

আপনার উত্তরটি সন্ধানের জন্য আমাকে কেবল দিনটি নিয়েছে ... ধন্যবাদ!

— কেভিন অ্যামিরানফ

Answer 3

সেই সমস্যার সমাধান হ'ল flexShrink: 1।

<View
    style={{ flexDirection: 'row' }}
> 
   <Text style={{ flexShrink: 1 }}>
       Really really long text...
   </Text>
</View>

আপনার সেট আপ উপর নির্ভর করে, আপনার কাছে এছাড়াও যোগ করার জন্য প্রয়োজন হতে পারে flexShrink: 1জন্য <View>পাশাপাশি এর পিতা বা মাতা, কাজ করার জন্য এই পেতে যাতে সঙ্গে খেলা এবং আপনি এটি করব।

সমাধান আবিষ্কার করেন আদম Pietrasiak মধ্যে এই থ্রেড।

Comments

পিতামাতার দৃষ্টিভঙ্গিও ছিল আমার জন্য সমাধান! যদি পিতামাতাদের ফ্লেক্সডাইরেশন থাকে: 'কলাম', পাঠ্য মোড়ানো থেকে প্রত্যাখ্যান।

— ক্রেস্টিংলাইট

আপনি সবেমাত্র আমার জীবন বাঁচিয়েছেন…

— নিকন্দর মার্হাল

পুরোপুরি কাজ করেছেন, আপনাকে ধন্যবাদ!

— fadzb

Answer 4

আপনার কেবল <Text>নীচের মত ফ্লেক্স সহ একটি র‌্যাপার থাকা দরকার ;

<View style={{ flex: 1 }}>
  <Text>Your Text</Text>
</View>

Comments

একমাত্র যথাযথ সমাধান যা প্রকৃতপক্ষে পাশাপাশি কাজ করে

— সর্বদা কনফিউজড

আসলে, flex: 1আপনার যা প্রয়োজন তা হল।

— উদাহরণস্বরূপ

Answer 5

আপনি যদি যথাক্রমে এবং flexDirection: rowথেকে সরান তবে এটি কাজ করে।descriptionContainerVerdescriptionContainerVer2

আপডেট (মন্তব্য দেখুন)

আমি মনে করি আপনি যা করছেন তা অর্জন করতে আমি কয়েকটি পরিবর্তন করেছি। সবার আগে আমি descriptionContainerHorউপাদানটি সরিয়েছি । তারপর আমি সেট flexDirectionকরতে উল্লম্ব মতামত rowএবং যোগ alignItems: 'center'এবং justifyContent: 'center'। যেহেতু উল্লম্ব দর্শনগুলি এখন অনুভূমিক অক্ষ বরাবর স্তুপীকৃত আমি Verনামটি থেকে অংশটি সরিয়েছি ।

সুতরাং এখন আপনার কাছে একটি মোড়কের দৃশ্য রয়েছে যা অনুভূমিকভাবে এবং আনুভূমিকভাবে এটির সামগ্রীটি সারিবদ্ধ করে এটি এক্স-অক্ষের সাথে স্ট্যাক করা উচিত। আমি তখন কেবল প্যাডিংটি করার জন্য Viewউপাদানটির বাম এবং ডানদিকে দুটি অদৃশ্য উপাদান রেখেছি Text।

এটার মত:

<View style={styles.descriptionContainer}>
  <View style={styles.padding}/>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..!
    </Text>
  <View style={styles.padding}/>
</View>

এবং এই:

descriptionContainer:{
  flex:0.5, //height (according to its parent),
  flexDirection: 'row',
  backgroundColor: 'blue',
  alignItems: 'center',
  justifyContent: 'center',
  // alignSelf: 'center',
},
padding: {
  flex: 0.1
},
descriptionText: {
  backgroundColor: 'green',//Colors.transparentColor,
  fontSize: 16,
  flex: 0.8,
  color: 'white',
  textAlign: 'center',
  flexWrap: 'wrap'
},

তারপরে আপনি যা পেয়েছেন তা আপনি পেয়েছেন you

আরও উন্নতি

এখন আপনি যদি নীল এবং কমলা রঙের ভিউগুলির মধ্যে একাধিক পাঠ্য অঞ্চল স্ট্যাক করতে চান তবে আপনি এই জাতীয় কিছু করতে পারেন:

<View style={styles.descriptionContainer2}>
  <View style={styles.padding}/>
  <View style={styles.textWrap}>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Some other long text which you can still do nothing about.. Off the screen we go then.
    </Text>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Another column of text.
    </Text>
  </View>
  <View style={styles.padding}/>
</View>

যেখানে textWrapএখানে স্টাইলযুক্ত:

textWrap: {
  flexDirection: 'column',
  flex: 0.8
},

আশাকরি এটা সাহায্য করবে!

Comments

ঠিক আছে আমি কী অর্জন করতে চাই তা প্রতিফলিত করতে আমি প্রশ্নটি কিছুটা পরিবর্তন করেছি। এখন উত্তর সম্পর্কে: আমি যে কারণটি ব্যবহার করেছি তা flexDirection: rowহ'ল কারণ (যদি আমার মাথায় এই অধিকার থাকে) flexDirectionতবে সেই পিতামাতার 'সন্তানেরা' যে দিকে তাকিয়ে থাকবে সেই নির্দেশটি নির্দেশ করে। এখন আমি চেয়েছিলাম টেক্সট হতে মধ্যম সন্তান বাবা-মা যে একটি সারিতে স্ট্যাকগুলি সন্তান ও ব্যাপৃত প্রস্থ (দ্বিতীয় ছবির মত কিছু) বাবা 80% হবে। আপনি দয়া করে এটি প্রতিফলিত করতে উত্তরটি কিছুটা আপডেট করতে পারেন? আমি এটি উত্তর হিসাবে গ্রহণ করতে ইচ্ছুক।

— সুডোপ্লাজ

দেরী জবাবের জন্য দুঃখিত, ব্যস্ত। তবে আমি আমার উত্তর আপডেট করেছি, আশা করি এটি আপনার প্রয়োজন ছিল।

— আইসি

এই উত্তরটি একেবারে আশ্চর্যজনক .. ঠিক আমি যা খুঁজছিলাম, ধন্যবাদ এলিয়ট !!!!!

— সুডোপ্লাজ

flexDirection: "row"আমার সমস্যার মূল বিষয় ছিল, ভাগ্য ছাড়াই অন্য সবকিছু চেষ্টা করেছিলাম। আপনার পরিবর্তন flexDirectionকরতে columnএবং পাঠ্য ভিতরে সাধারণত মোড়ানো হবে।

— এশিফাইভ

Answer 6

এই সমস্যাটির সাথে আমি খুঁজে পেয়েছি এমন আরও একটি সমাধান হ'ল পাঠ্যটিকে একটি ভিউয়ের অভ্যন্তরে মোড়ানো। এছাড়াও ভিউয়ের স্টাইলটি ফ্লেক্সে সেট করুন: 1।

Answer 7

আমি যুক্ত করতে চেয়েছিলাম যে আমার একই সমস্যা এবং ফ্লেক্সওয়্যারপ, ফ্লেক্স: 1 (পাঠ্যের উপাদানগুলিতে) ছিল, আমার জন্য কিছুই ফ্লেক্স কাজ করছে না।

অবশেষে, আমি আমার পাঠ্য উপাদানগুলির মোড়কের প্রস্থ ডিভাইসের প্রস্থে সেট করলাম এবং পাঠ্য মোড়ানো শুরু করল। const win = Dimensions.get('window');

      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignSelf: 'center',
        width: win.width
      }}>
        <Text style={{ top: 0, alignSelf: 'center' }} >{image.title}</Text>
        <Text style={{ alignSelf: 'center' }}>{image.description}</Text>
      </View>

Answer 8

<View style={{flexDirection:'row'}}> 
   <Text style={{ flex: number }}> You miss fdddddd dddddddd 
     You miss fdd
   </Text>
</View>

{ফ্লেক্স: aNumber you আপনার যা দরকার তা হল!

আপনার পক্ষে উপযুক্ত কোনও সংখ্যায় কেবল 'ফ্লেক্স' সেট করুন। এবং তারপরে পাঠ্যটি মোড়ানো হবে।

Comments

আশ্চর্যের বিষয় হল এটি আসলে আমার জন্য কাজ করা ঠিক।

— ভয়ঙ্কর বার

Answer 9

নেটিভ রিএটিভের 0.62.2 সংস্করণে, আমি আমার "পাঠ্য" এর ধারকটিতে কেবল "ফ্লেক্স-সঙ্কুচিত: 1" রেখেছি, তবে নমনীয় দিকটি: ধারকটির সারিটিতে সারি মনে রাখি। সাহায্যের জন্য আপনাকে বলছি ধন্যবাদ।

আমার কোড:

export const Product = styled.View`
  background: #fff;
  padding: 15px 10px;
  border-radius: 5px;
  margin: 5px;
  flex-direction: row;
`;

export const ProductTitleContainer = styled.View`
  font-size: 16px;
  margin-left: 5px;
  flex-shrink: 1;
`;

export const ProductTitle = styled.Text`
  font-size: 16px;
  flex-wrap: wrap;
`;
`;

Answer 10

আমার সমাধান নীচে:

<View style={style.aboutContent}>
     <Text style={[styles.text,{textAlign:'justify'}]}>
        // text here                            
     </Text>
</View>

শৈলী:

aboutContent:{
    flex:8,
    width:widthDevice-40,
    alignItems:'center'
},
text:{
    fontSize:widthDevice*0.04,
    color:'#fff',
    fontFamily:'SairaSemiCondensed-Medium'
},

ফলাফল: [

Comments

সুতরাং আপনি পিতামাতার উপর একটি স্থির প্রস্থ ব্যবহার করছেন, যা আমরা এখানে এড়াতে চেয়েছিলাম।

— সুডোপ্লিজ

Answer 11

<Text style={{width: 200}} numberOfLines={1} ellipsizeMode="tail">Your text here</Text>

Comments

আপনার উত্তরের কোন অংশটি ওপিএস সমস্যা সমাধান করে এবং কেন তা দয়া করে বর্ণনা করুন।

— সেবাস্তিয়ান বি