javascript - flexWrap 不适用于 React Native 中的 元素

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

这里

'This sample text should be wrap wrap wrap ....'

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

Please find the screenshot

Here is the working code for text wrap with 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>)
  }
})

Answer 1

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

Help link