反应我的屏幕上的本机文本,拒绝包装.该怎么办？

Question

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

我有以下反应原生元素:

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

我想要实现的是这样的:

谢谢!

Answer 1

我从下面链接找到了解决方案.

[文本]文本不包装#1438

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

如果你想感谢他,下面是Github个人资料用户链接.

Ally Rippley

Answer 2

大多数时候，我们在使用时会看到这个问题，flexDirection: 'row'因为在其他情况下，它是处理得当的。

无论如何，这里有两种正确换行文本的方法；

第一种方法：

<Text>要将文本换行到下一行而不离开显示，我们可以通过限制;的宽度来实现。

<Text style={{width: "60%"}}>some long text goes here ...</Text>

上面的代码将文本的宽度限制为可用宽度的 60%，如果整个文本不适合该宽度，它将自动换行，即剩余的文本将移动到下一行，依此类推。

第二种方法

flexShrink: 1在文本元素及其包装它的父元素上设置。

例如，

<View style={{ flexShrink: 1, justifyContent: 'space-between', alignItems: 'center', flex: 1, flexDirection: 'row'}}>
    <Text>First long string which goes long....</Text>
    <Text style={{flexShrink: 1}}>This is a long long text which must go out of the screen if we dont style it properly and not do some logic here</Text>
</View>

其他样式只是为了表明结果正常工作。flexShrink: 1是你唯一需要的东西。

Answer 3

这是一个已知的错误. flexWrap: 'wrap'不起作用,但这个解决方案似乎适用于大多数人

码

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

样式

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

Answer 4

这对我有用

<View style={{flexShrink:1}}>
  <Text>some long random text...</Text>
</View>

Answer 5

你需要为你<Text>的flex 设置一个包装器,如下所示;

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

Answer 6

The solution to that issue is flexShrink: 1.

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

Depending on your set up, you may also also need to add flexShrink: 1 to the <View>'s parent as well, to get this to work, so play with that and you'll make it.

The solution was discovered by Adam Pietrasiak in this thread.

Answer 7

<View style={{flexDirection:'row'}}> 
  <Text style={{flex: 1, flexWrap: 'wrap'}}> 

这将工作

Answer 8

如果你删除它的工作原理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
},

希望这可以帮助!

Answer 9

我尝试了上面的许多答案，但没有一个对我有用。flexShrink我通过放置Text元素本身以及flexGrow父元素View和元素获得了最佳结果Text。

我需要flexDirection: row父级，因为我想在右侧有一个图标

<View style={flexDirection: 'row', flexGrow: 1}>
    <Text style={
        flexGrow: 1, 
        flexShrink: 1, 
        paddingLeft: 16,
        paddingRight: 8,
        alignItems: 'center',
    }>
        A long text that needs to wrap into multiple lines
    </Text>
</View>
<Image source={rightArrow}/>

它看起来像这样：

Answer 10

我有同样的问题，要解决它，我必须确保所有视图的父母都有 style={{flex: 1}}

Answer 11

我发现此问题的另一个解决方案是将文本包装在视图中。还要将View的样式设置为flex：1。