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

Answer 1

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

帮助链接

Answer 2

我认为如果您在样式表中为文本指定 flex 属性，它将换行。

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