Pertanyaan Bereaksi teks asli pergi dari layar saya, menolak untuk membungkus. Apa yang harus dilakukan?


Kode berikut dapat ditemukan di contoh langsung ini

Saya punya elemen asli berikut yang bereaksi:

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

dengan gaya berikut:

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

Ini menghasilkan layar berikut:

Text off screen app

Bagaimana saya bisa menghentikan teks dari layar dan membiarkannya terbatas di tengah layar dengan lebar 80% dari orang tua. 

Saya tidak berpikir saya harus menggunakannya width karena saya akan menjalankan ini pada layar ponsel yang berbeda dan saya ingin itu menjadi dinamis, jadi saya pikir saya harus bergantung sepenuhnya pada flexbox.

(Itulah alasan awal mengapa saya punya flex: 0.8 dalam descriptionContainerHor.

Yang ingin saya capai adalah sesuatu seperti ini:

What I want to achieve

Terima kasih!


31
2018-03-29 12:35


asal


Jawaban:


Saya menemukan solusi dari tautan di bawah.

[Teks] Teks tidak membungkus # 1438

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

Output

Di bawah ini adalah tautan pengguna profil Github jika Anda ingin berterima kasih padanya.

Ally Rippley


35
2017-07-10 15:16



Ini adalah bug yang diketahui. flexWrap: 'wrap' tidak bekerja untuk saya tetapi solusi ini tampaknya bekerja untuk kebanyakan orang

Kode

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

Styles

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

10
2017-11-12 23:00



Ini berfungsi jika Anda menghapus flexDirection: row dari descriptionContainerVer dan descriptionContainerVer2 masing-masing.

UPDATE (lihat komentar)

Saya membuat beberapa perubahan untuk mencapai apa yang saya pikir Anda harapkan. Pertama-tama saya menghapus descriptionContainerHor komponen. Lalu saya mengatur flexDirection dari tampilan vertikal ke row dan ditambahkan alignItems: 'center' dan justifyContent: 'center'. Karena pandangan vertikal sekarang sebenarnya ditumpuk sepanjang sumbu horizontal saya menghapus Ver bagian dari nama.

Jadi sekarang Anda memiliki tampilan wrapper yang harus secara vertikal dan horizontal sejajarkan kontennya dan susun sepanjang sumbu x. Saya kemudian hanya menempatkan dua yang tidak terlihat View komponen di sisi kiri dan kanan Text komponen untuk melakukan padding.

Seperti ini:

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

Dan ini:

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

Maka Anda mendapatkan apa yang saya yakini Anda inginkan.

PENINGKATAN LEBIH JAUH

Sekarang jika Anda ingin menumpuk beberapa bidang teks dalam tampilan biru dan oranye Anda dapat melakukan sesuatu seperti ini:

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

Dimana textWrapditata seperti ini:

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

Semoga ini membantu!


7
2018-03-29 20:48



Solusi lain yang saya temukan untuk masalah ini adalah dengan membungkus Teks di dalam Tampilan. Juga mengatur gaya View to flex: 1.


3
2018-02-24 00:00



Anda hanya perlu memiliki pembungkus untuk Anda <Text> dengan flex seperti di bawah ini;

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

2
2017-11-05 19:36



solusi saya di bawah ini:

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

gaya:

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

hasil: [d]my result[1]


-1
2017-07-16 08:01