Reaguj na natywny tekst wychodzący z mojego ekranu, odmawiając zawijania. Co robić?

Poniższy kod można znaleźć w tym przykładzie na żywo

Mam następujący element reagowania:

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

z następującymi stylami:

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

Powoduje to następujący ekran:

Jak mogę powstrzymać tekst przed znikaniem z ekranu i trzymać go w środku ekranu o szerokości np. 80% rodzica.

Myślę, że nie powinienem go używać, widthponieważ będę go uruchamiać na WIELU różnych ekranach mobilnych i chcę, aby był dynamiczny, więc myślę, że powinienem całkowicie polegać flexbox.

(To był pierwszy powód, dla którego miałem flex: 0.8w descriptionContainerHor.

To, co chcę osiągnąć, to coś takiego:

Dziękuję Ci!

Znalazłem rozwiązanie z poniższego linku.

[Tekst] Tekst nie zawija się # 1438

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

Poniżej znajduje się link do profilu Github, jeśli chcesz mu podziękować.

Ally Rippley

Edycja: wtorek 09 kwietnia 2019

Jak @sudoPlz wspomniał w komentarzach, działa z flexShrink: 1aktualizacją tej odpowiedzi.

To znany błąd . flexWrap: 'wrap'nie działało dla mnie, ale to rozwiązanie wydaje się działać dla większości ludzi

Kod

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

Style

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

Rozwiązaniem tego problemu jest flexShrink: 1.

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

W zależności od konfiguracji, możesz również potrzebować dodać coś flexShrink: 1do <View>rodzica, aby to zadziałało, więc baw się tym, a ci się uda.

Rozwiązanie zostało odkryte przez Adama Pietrasiaka w tym wątku.

po prostu musisz mieć opakowanie <Text>z flexem jak poniżej;

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

Działa, jeśli usuniesz odpowiednio flexDirection: rowz descriptionContainerVeri descriptionContainerVer2.

UPDATE (patrz komentarze)

Wprowadziłem kilka zmian, aby osiągnąć to, o czym myślę, że chcesz. Przede wszystkim usunąłem descriptionContainerHorkomponent. Następnie ustawiłem flexDirectionwidoki pionowe na rowi dodałem alignItems: 'center'i justifyContent: 'center'. Ponieważ widoki pionowe są teraz w rzeczywistości ułożone wzdłuż osi poziomej, usunąłem Verczęść z nazwy.

Teraz masz widok opakowania, który powinien wyrównać zawartość w pionie i poziomie i ułożyć ją w stos wzdłuż osi x. Następnie po prostu umieszczam dwa niewidoczne Viewkomponenty po lewej i prawej stronie Textkomponentu, aby wykonać wypełnienie.

Lubię to:

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

I to:

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

Wtedy dostajesz to, o co myślę, że szukałeś.

DALSZE DOSKONALENIA

Teraz, jeśli chcesz ułożyć wiele obszarów tekstowych w niebieskich i pomarańczowych widokach, możesz zrobić coś takiego:

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

Gdzie textWrapjest tak stylizowany:

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

Mam nadzieję że to pomoże!

Innym rozwiązaniem, które znalazłem w tym problemie, jest zawijanie tekstu wewnątrz widoku. Ustaw także styl widoku na flex: 1.

Chciałem dodać, że miałem ten sam problem i flexWrap, flex: 1 (w komponentach tekstowych), nic flex dla mnie nie działało.

Ostatecznie ustawiłem szerokość opakowania moich składników tekstowych na szerokość urządzenia i tekst zaczął się zawijać. 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} to wszystko, czego potrzebujesz!

Po prostu ustaw „flex” na odpowiednią dla siebie liczbę. A potem tekst się zawinie.

W wersji 0.62.2 React Native po prostu umieściłem "flex-shrink: 1" w Container of my "Text", ale zapamiętaj flex-direction: row w widoku kontenera. Dziękuję za pomoc.

Mój kod:

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

moje rozwiązanie poniżej:

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

styl:

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

wynik: [

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