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

Kode berikut dapat ditemukan dalam contoh langsung ini

Saya punya elemen react native berikut:

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

Bagaimana cara menghentikan teks agar tidak keluar dari layar dan membuatnya tetap terbatas di tengah layar dengan lebar yaitu 80% dari induk.

Saya rasa saya tidak harus menggunakan widthkarena saya akan menjalankan ini di BANYAK layar ponsel yang berbeda dan saya ingin ini menjadi dinamis, jadi saya pikir saya harus mengandalkan sepenuhnya flexbox.

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

Yang ingin saya capai adalah seperti ini:

Terima kasih!

Saya menemukan solusi dari tautan di bawah ini.

[Teks] Teks tidak membungkus # 1438

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

Di bawah ini adalah tautan pengguna profil Github jika Anda ingin mengucapkan terima kasih.

Ally Rippley

Edit: Sel 09 Apr 2019

Seperti yang disebutkan @sudoPlz dalam komentar, ini berfungsi dengan flexShrink: 1memperbarui jawaban ini.

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

Kode

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

Gaya

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

Solusi untuk masalah itu adalah flexShrink: 1.

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

Tergantung pada pengaturan Anda, Anda mungkin juga perlu menambahkan flexShrink: 1ke orang <View>tua juga, agar ini bekerja, jadi mainkan dengan itu dan Anda akan berhasil.

Solusinya ditemukan oleh Adam Pietrasiak di utas ini.

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

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

Ini berfungsi jika Anda menghapus flexDirection: rowdari descriptionContainerVerdan descriptionContainerVer2masing - masing.

UPDATE (lihat komentar)

Saya membuat beberapa perubahan untuk mencapai apa yang menurut saya Anda cari. Pertama-tama saya menghapus descriptionContainerHorkomponen. Kemudian saya mengatur flexDirectiontampilan vertikal ke rowdan menambahkan alignItems: 'center'dan justifyContent: 'center'. Karena tampilan vertikal sekarang sebenarnya ditumpuk di sepanjang sumbu horizontal, saya menghapus Verbagian dari namanya.

Jadi sekarang Anda memiliki tampilan pembungkus yang harus secara vertikal dan horizontal menyelaraskan kontennya dan menumpuknya di sepanjang sumbu x. Saya kemudian hanya meletakkan dua Viewkomponen yang tidak terlihat di sisi kiri dan kanan Textkomponen 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'
},

Kemudian Anda mendapatkan apa yang saya yakin Anda kejar.

PENINGKATAN LEBIH LANJUT

Sekarang jika Anda ingin menumpuk beberapa area 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 textWrapyang ditata seperti ini:

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

Semoga ini membantu!

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

Saya ingin menambahkan bahwa saya mengalami masalah yang sama dan flexWrap, flex: 1 (dalam komponen teks), tidak ada flex yang berhasil untuk saya.

Akhirnya, saya mengatur lebar pembungkus komponen teks saya ke lebar perangkat dan teks mulai membungkus. 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>

{flex: aNumber} adalah semua yang Anda butuhkan!

Cukup atur 'flex' ke nomor yang sesuai untuk Anda. Dan kemudian teks akan dibungkus.

Dalam versi 0.62.2 dari React Native, saya hanya meletakkan "flex-shrink: 1" di Container of my "Text", tapi ingat baris flex-direction: di View of container. Terima kasih teman-teman atas bantuannya.

Kode saya:

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

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

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