Kaydırmayı reddederek ekranımdan çıkan yerel metne tepki ver. Ne yapalım?

Aşağıdaki kod bu canlı örnekte bulunabilir

Aşağıdaki tepki yerel unsuruna sahibim:

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

aşağıdaki stillerle:

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

Bu, aşağıdaki ekranla sonuçlanır:

Metnin ekrandan çıkmasını nasıl durdurabilirim ve ekranın ortasında ör. Ebeveynin% 80'i kadar bir genişlikte kalmasını nasıl sağlayabilirim.

widthKullanmam gerektiğini düşünmüyorum çünkü bunu BİRÇOK farklı mobil ekranda çalıştıracağım ve dinamik olmasını istiyorum, bu yüzden tamamen güvenmem gerektiğini düşünüyorum flexbox.

(Yani ben neden ilk nedeni oldu flex: 0.8dahilinde descriptionContainerHor.

Başarmak istediğim şey şuna benzer:

Teşekkür ederim!

Aşağıdaki bağlantıdan çözüm buldum.

[Metin] Metin kaymaz # 1438

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

Ona teşekkür etmek istiyorsanız aşağıda Github profili kullanıcı bağlantısı var.

Ally Rippley

Düzenleme: Sal 09 Nisan 2019

@SudoPlz yorumlarda belirtildiği gibi flexShrink: 1bu cevabı güncelleyerek çalışır .

Bu bilinen bir hatadır . flexWrap: 'wrap'benim için işe yaramadı ama bu çözüm çoğu insan için işe yarıyor gibi görünüyor

kod

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

stiller

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

Bu sorunun çözümü flexShrink: 1.

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

Senin sette kadar bağlı olarak, aynı zamanda da eklemek gerekebilir flexShrink: 1için <View>öylesine, işe bu olsun göre, oynayacak, hem de 'ın veli ve bunu yapacağız.

Solüsyon tarafından keşfedildi Adam Pietrasiak içinde bu konuya.

sadece <Text>aşağıdaki gibi flex ile bir paketleyiciye ihtiyacınız var ;

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

Kaldırmak eğer çalışır flexDirection: rowgelen descriptionContainerVerve descriptionContainerVer2sırasıyla.

GÜNCELLEME (yorumlara bakın)

Peşinde olduğunu düşündüğüm şeye ulaşmak için birkaç değişiklik yaptım. Öncelikle descriptionContainerHorbileşeni çıkardım . Sonra set flexDirectiondikey görüş rowve katma alignItems: 'center've justifyContent: 'center'. Dikey görünümler artık yatay eksen boyunca istiflendiğinden Verparçayı adından kaldırdım .

Artık içeriğini dikey ve yatay olarak hizalaması ve x ekseni boyunca istiflemesi gereken bir sarmalayıcı görünümünüz var. Ardından dolgu yapmak için bileşenin Viewsol ve sağ tarafına iki görünmez bileşen Textkoyarım.

Bunun gibi:

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

Ve bu:

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'
},

Sonra peşinde olduğuna inandığım şeyi alırsın.

DAHA FAZLA İYİLEŞTİRME

Şimdi, mavi ve turuncu görünümler içinde birden çok metin alanını istiflemek isterseniz, şöyle bir şey yapabilirsiniz:

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

Bu textWraptarz nerede :

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

Bu yardımcı olur umarım!

Bu soruna bulduğum başka bir çözüm, Metni bir Görünümün içine kaydırmaktır. Ayrıca Görünüm stilini de esnek olarak ayarlayın: 1.

Aynı sorunu yaşadığımı eklemek istedim ve flexWrap, flex: 1 (metin bileşenlerinde), flex benim için hiçbir şey çalışmıyordu.

Sonunda, metin bileşenlerimin sarmalayıcısının genişliğini aygıtın genişliğine ayarladım ve metin kaydırmaya başladı. 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>

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

Tek ihtiyacınız olan {flex: aNumber}!

Sadece size uygun bir sayıya 'esnek' ayarlayın. Ve sonra metin sarılır.

React Native'in 0.62.2 sürümünde, "Text "imin Container'ına" flex-shrink: 1 "koydum, ancak View of container'daki flex-direction: row'u hatırlayın. Yardımınız için teşekkürler arkadaşlar.

Kodum:

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;
`;
`;

aşağıdaki çözümüm:

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

stili:

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

sonuç: [

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