画面からはみ出すネイティブテキストに反応し、折り返しを拒否します。何をすべきか？

次のコードは、このライブの例にあります

私は次の反応ネイティブ要素を持っています：

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

私が達成したいのは次のようなものです：

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

下のリンクから解決策を見つけました。

[テキスト]テキストが折り返されない＃1438

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

彼に感謝したい場合は、以下にGithubプロファイルのユーザーリンクを示します。

アリーリプリー

編集：2019年4月9日火曜日

@sudoPlzがコメントで述べたように、flexShrink: 1これはこの回答の更新で機能します。

これは既知のバグです。 flexWrap: 'wrap'私にはうまくいきませんでしたが、この解決策はほとんどの人にとってうまくいくようです

コード

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

スタイル

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

その問題の解決策はflexShrink: 1です。

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

設定によっては、これを機能させるためにの親にも追加flexShrink: 1する必要がある場合<View>があります。これを試してみてください。

溶液はによって発見されたアダムPietrasiakでこのスレッド。

<Text>以下のようなflexのラッパーが必要です。

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

とflexDirection: rowからそれぞれ削除するdescriptionContainerVerと機能しdescriptionContainerVer2ます。

更新（コメントを参照）

私はあなたが望んでいると思うことを達成するためにいくつかの変更を加えました。まず、descriptionContainerHorコンポーネントを削除しました。次にflexDirection、垂直ビューのをに設定し、rowおよびを追加alignItems: 'center'しましたjustifyContent: 'center'。垂直ビューは実際には水平軸に沿ってスタックされているのでVer、名前からパーツを削除しました。

これで、コンテンツを垂直方向と水平方向に揃え、x軸に沿ってスタックするラッパービューができました。次に、Viewコンポーネントの左側と右側に2つの非表示Textコンポーネントを配置して、パディングを行います。

このような：

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

この：

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

その後、あなたは私が信じていたものを手に入れます。

さらなる改善

ここで、青色とオレンジ色のビュー内に複数のテキスト領域をスタックしたい場合は、次のようにすることができます：

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

どこにtextWrapこのようなスタイルがあります：

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

お役に立てれば！

この問題に対して私が見つけた別の解決策は、ビュー内でテキストをラップすることです。また、ビューのスタイルをflexに設定します：1。

同じ問題とflexWrap、flex：1（テキストコンポーネント内）が発生していることを追加したかったのですが、flexが機能していませんでした。

最終的に、テキストコンポーネントのラッパーの幅をデバイスの幅に設定し、テキストの折り返しを開始しました。 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}で十分です。

「フレックス」をあなたに合った数に設定するだけです。そして、テキストは折り返されます。

React Nativeのバージョン0.62.2では、「テキスト」のコンテナーに「flex-shrink：1」を挿入するだけですが、コンテナーのビューのflex-direction：rowを覚えています。助けてくれてありがとう。

私のコード：

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

以下の私の解決策：

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

スタイル：

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

結果：[

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