反应本机文本从我的屏幕上消失，拒绝换行。该怎么办？

在此实时示例中可以找到以下代码

我有以下反应本机元素：

'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个人资料用户链接。

艾莉·里普利（Ally Rippley）

编辑：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>的父项，以使其正常工作，因此您可以尝试一下。

该解决方案是由Adam 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组件的左侧和右侧放置两个不可见的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
},

希望这可以帮助！

我发现此问题的另一个解决方案是将Text包裹在View中。还要将View的样式设置为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}是您所需要的！

只需将“ flex”设置为适合您的数字即可。然后文本将自动换行。

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