रैप करने से इनकार करते हुए, मेरी स्क्रीन से मूल पाठ को पुन: चलाएं। क्या करें?

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'
  }
});

यह निम्नलिखित स्क्रीन में परिणाम है:

मैं पाठ को स्क्रीन से बाहर जाने से कैसे रोक सकता हूं और इसे स्क्रीन के मध्य में 80% अभिभावक की चौड़ाई के साथ सीमित रख सकता हूं।

मुझे नहीं लगता कि मुझे इसका उपयोग करना चाहिए widthक्योंकि मैं इसे कई मोबाइल स्क्रीन पर चला रहा हूं और मैं चाहता हूं कि यह गतिशील हो, इसलिए मुझे लगता है कि मुझे पूरी तरह से भरोसा करना चाहिए flexbox।

(यह प्रारंभिक कारण था कि मैं flex: 0.8भीतर क्यों था descriptionContainerHor?

जो मैं हासिल करना चाहता हूं वह कुछ इस तरह है:

धन्यवाद!

Answer 1

मुझे नीचे दिए गए लिंक से समाधान मिला।

[पाठ] पाठ # १४३ wrap लपेटता नहीं है

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

यदि आप उसे धन्यवाद देना चाहते हैं तो नीचे Github प्रोफ़ाइल उपयोगकर्ता लिंक है।

सहयोगी रिप्पली

---

संपादित करें: Tue Apr 09 2019

जैसा कि @sudoPlz ने टिप्पणियों में उल्लेख किया है वह flexShrink: 1इस उत्तर को अपडेट करने के साथ काम करता है ।

Comments

धन्यवाद, यह एक बहुत अच्छा जवाब है, लेकिन मैंने इसे आज़माया है और किसी कारण से यह हमेशा काम नहीं करता है (पता नहीं क्यों: एस)। flexWrap प्रतिक्रिया-मूल में थोड़ा परतदार है। हालांकि इसे लाने के लिए +1।

— सूडोप्ल्ज़

^ ^ ^ यह यहाँ वास्तविक जवाब है। यह Op स्वीकार करें!

— ग्रेग ब्लास

इस उत्तर के जानकारी भाग पर ध्यान दें github.com/facebook/react-native/issues/…

— SudoPlz

मुझे पता चला कि कुछ मामलों flexShrink: 1में मूल दृश्य पर लागू होने से भी मदद मिलेगी।

— सुदोप्लज़

यह काम। धन्यवाद।

— उद्धेश_जैन

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> और साथ ही के माता पिता,, काम करने के लिए इसे पाने के लिए इतना है कि के साथ खेलते हैं और आप इसे कर देंगे।

इस सूत्र में एडम पीटरसियक द्वारा समाधान की खोज की गई थी ।

Comments

माता-पिता का विचार भी मेरे लिए समाधान था! यदि माता-पिता में फ्लेक्सडायरेक्शन: 'कॉलम' है, तो टेक्स्ट ने रैप करने से इनकार कर दिया।

— crestinglight

आपने अभी-अभी मेरी जान बचाई है ...

— निकेन्द्र मारल

पूरी तरह से काम किया, धन्यवाद!

— १२:०२ पर 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'
},

फिर आपको वही मिलता है जो मैं मानता हूं कि आप उसके बाद थे।

अन्य प्रभाव

अब यदि आप नीले और नारंगी दृश्यों के भीतर कई पाठ क्षेत्रों को स्टैक करना चाहते हैं, तो आप कुछ इस तरह से कर सकते हैं:

<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% माता-पिता की चौड़ाई (दूसरी तस्वीर जैसी कुछ) पर कब्जा कर लेता है। क्या आप कृपया उत्तर को अपडेट करने के लिए इसे प्रतिबिंबित कर सकते हैं? मैं इसे उत्तर के रूप में स्वीकार करने को तैयार हूं।

— सूडोप्लज़

देर से जवाब के लिए क्षमा करें, व्यस्त था। लेकिन मैंने अपना जवाब अपडेट कर दिया है, आशा है कि यह वही होगा जो आपको चाहिए था।

— Eysi

यह जवाब ABSOLUTELY अद्भुत है .. वास्तव में मैं क्या देख रहा हूँ, धन्यवाद इलियट !!!!!

— सूडोप्ल्ज़

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>

{flex: aNumber} आप सभी की जरूरत है!

बस 'फ्लेक्स' को उस नंबर पर सेट करें जो आपके लिए उपयुक्त हो। और फिर टेक्स्ट रैप होगा।

Comments

वास्तव में यह वास्तव में मेरे लिए काम करने वाला फिक्स था।

— Dror Bar

Answer 9

रिएक्ट नेटिव के संस्करण ०.६२.२ में, मैंने सिर्फ अपने "टेक्स्ट" के कंटेनर में "फ्लेक्स-हटना: 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

कृपया वर्णन करें कि आपके उत्तर का कौन सा भाग ओपी समस्याओं को हल करता है और क्यों।

— सेबस्टियन बी।