文本组件不会包装文本 react-native答案

【问题标题】：Text component won't wrap text react-native文本组件不会包装文本 react-native
【发布时间】：2016-09-24 00:29:42
【问题描述】：

上面的图片显示了我想要的文字被包裹的图片是可见的

代码是

<View style={{
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    }}>
    <Image
      source={require('./default.png')}
      style={{
        width: 5,
        height: 81,
        flex: 1
      }}
      />
    <View style={{flex: 2, flexDirection: 'column'}}>
      <Text numberOfLines= {1}
        maxLength={10}
        truncatePosition="middle"
         style={{fontSize: 15,
          marginBottom: 8,
          textAlign: 'center',

        }}>
        {rowData.userFileName}
      </Text>
      <Text style={{textAlign: 'center'}}>size: {rowData.size}</Text>
    </View>
  </View>

我认为这只是一个样式问题，但尝试了所有关于 flex 布局更改为值的内容，但没有任何效果。

我想要这样的东西

+---------------------------------+
|+-------++----------------------+|
||       ||        Name          ||
|| Image ||                      ||
||       ||        Size          ||
|+-------++----------------------+|
+---------------------------------+

我按照官方教程得到了类似的东西，但是图像被剪掉了，如果长的话，名称是唯一显示的东西（参考图像）。

P.s：我是 css 样式的新手，所以如果这个问题很愚蠢，请原谅我。

谢谢，

【问题讨论】：

你试过word-wrap: break-word，在textAlign: 'center',之后添加文本元素的样式
您是否希望将两个文本组件包裹在一个视图中。给我们更多的说明。试试 { flexWrap: 'wrap'}
参考已编辑的问题，我也关注了stackoverflow.com/questions/30594080/… 但它不可扩展！！
我在本地运行你的代码。它工作正常。如果您想了解布局是如何出现的，您可以在组件样式中添加 borderWidth: 1.0, borderColor: 'orange' 并查看。这是link，它给出了您正在寻找的相同效果。查看 Flexbox 和样式部分。
知道了，谢谢 Ashok

标签： javascript css react-native

【解决方案1】：

我正在本地运行您的代码。它工作正常。如果您想了解布局是如何出现的，可以在您的组件样式中添加borderWidth: 1.0, borderColor: 'orange'。

这是一个link，它提供了您想要的相同效果。查看 Flexbox 和样式部分。

Ashok

【讨论】：