[解決済み】React ネイティブのテキストが画面外に出てしまい、折り返すことを拒否されています。どうすればいいですか？

質問

に次のようなコードがあります。 このライブの例

以下のようなreact nativeの要素がありますね。

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

実現したいのは、こんな感じです。

ありがとうございました。

解決方法は？

その問題の解決策は flexShrink: 1 .

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

あなたのセットアップによっては、さらに flexShrink: 1 を <View> の親も同様に、これを動作させるために、それを再生すると、作成します。

解決策を発見したのは アダム・ピエトラシアク で このスレッド