flexWrap 不适用于 React Native 中的 <Text> 元素答案

【问题标题】：flexWrap not working for <Text> element in React NativeflexWrap 不适用于 React Native 中的 <Text> 元素
【发布时间】：2016-05-12 09:37:26
【问题描述】：

这是我的场景

var FlexWrap = React.createClass({
  render:function(){
    return(<View style={{flexDirection:'row'}}>
      <Image source={{uri:profileImage}}
             style={{width:100,height:100}}>
      </Image>
      <View style={{marginLeft:5}}>
        <Text style={{marginTop:5,
          marginBottom:5,
          flexWrap:'wrap'}}>
          This sample text
          should be wrap
          wrap wrap ....
        </Text>
        <Text style={{marginTop:5,
          marginBottom:5,
          flexWrap:'wrap'}}>
          This sample text
          should be wrap
          wrap wrap ....
        </Text>
      </View>
    </View>)
  }
})

这里

'这个示例文本应该是 wrap wrap wrap ....'

单身行，但在我的场景中，自动基于窗口宽度文本应该换行。这里我使用flexWrap: 'wrap' 来换行，但是正确的换行方式是什么？

请找截图

这是使用 flexDirection:'row' 进行文本换行的工作代码

var FlexWrap = React.createClass({
  render:function(){
    return(<View style={{flexDirection:'row'}}>
      <Image source={{uri:profileImage}}
             style={{width:100,height:100}}>
      </Image>
      <View style={{marginLeft:5,flex:1}}>//using flex:1
        <Text style={{marginTop:5,
          marginBottom:5
        }}>
          This sample text
          should be wrap
          wrap wrap ....
        </Text>
        <Text style={{marginTop:5,
          marginBottom:5
        }}>
          This sample text
          should be wrap
          wrap wrap ....
        </Text>
      </View>
    </View>)
  }
})

【问题讨论】：

您使用的是 iOS 还是 Android？我在 iOS 上测试了你的代码，它似乎工作正常。
我正在为IOS和Android工作。在IOS模拟器中，文本换行没有完成。请在上面找到所附的截图
当我对父视图使用 flexDirction:'row' 时，文本换行不起作用，否则没有 flexDirection:'row' 它可以工作。但在我的场景中 flexDirection:'row' 是必要的并且当时文字换行也是强制性的，如何实现这一点帮助我
我得到了解决方案，当与 flexDirection:'row' 一起使用时，解决方案是将包装的文本保持视图设置为 flex:1，我更新了上面的代码。

标签： javascript reactjs flexbox react-native

【解决方案1】：

var FlexWrap = React.createClass({
  render:function(){
    return(<View style={{flexDirection:'row'}}>
      <Image source={{uri:profileImage}}
             style={{width:100,height:100}}>
      </Image>
      <View style={{marginLeft:5,flex:1,flexDirection:'column', flexWrap:'wrap'}}>// Changes here
        <Text style={{marginTop:5,
          marginBottom:5
        }}>
          This sample text
          should be wrap
          wrap wrap ....
        </Text>
        <Text style={{marginTop:5,
          marginBottom:5
        }}>
          This sample text
          should be wrap
          wrap wrap ....
        </Text>
      </View>
    </View>)
  }
})

如果你改变你的弯曲方向并包裹它，你会得到你想要的结果

【讨论】：

【解决方案2】：

将flex: 1 设置为文本的包装视图

Help link

【讨论】：

太棒了。谢谢。
注意：根据我的测试，只需flexShrink: 1 即可完成这项工作，至少对于我的用例而言：codesandbox.io/embed/7wlorrx3p1

【解决方案3】：

你可以像下面那样做某事：

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

【讨论】：

【解决方案4】：

我想如果你在样式表中为它会换行的文本指定 flex 属性。

<Text style={{marginTop:5, marginBottom:5, flexWrap:'wrap', **flex: 5,** }}>

【讨论】：