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

Question

这是我的场景

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

原文由 vasavi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

帮助链接

原文由 I.dev 发布，翻译遵循 CC BY-SA 4.0 许可协议