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设置为文本的包装视图

Help link

Answer 2

我认为如果你在样式表中指定它将包装的文本的flex属性。

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

Answer 3

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

如果更改弯曲方向并将其包裹，您将获得所需的结果

Answer 4

你可以做下面的事情：

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