Javascript flexWrap 不适用于 React Native 中的 <Text> 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35172831/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
flexWrap not working for <Text> element in React Native
提问by vasavi
Here is my sceanario
这是我的场景
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>)
}
})
Here
这里
'This sample text should be wrap wrap wrap ....'
'这个示例文本应该是 wrap wrap wrap ....'
is in single
line, but in my scenario based on the window width automatically the
text should be wrap.
Here i am using flexWrap: 'wrap'to wrap the text, but what is the correct way to wrap the text?
是单行的，但在我的场景中，基于窗口宽度的文本应该自动换行。在这里，我使用flexWrap: 'wrap'包裹文本，但是包裹文本的正确方法是什么？
Please find the screenshot
请找到截图
Here is the working code for text wrap with flexDirection:'row'
这是使用 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>)
}
})
回答by Savio Sebastian
I think if you specify the flex property in the stylesheet for the text it will wrap.
我认为如果您在样式表中为文本指定 flex 属性，它将换行。
<Text style={{marginTop:5, marginBottom:5, flexWrap:'wrap', **flex: 5,** }}>
回答by Ank
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>)
}
})
You will have your desired result if you change your flex direction and wrap it
如果您更改弯曲方向并将其包裹起来，您将获得所需的结果
回答by jsina
simply you could do sth like below:
只是你可以像下面那样做某事：
<View style={{ flex: 1 }}>
<Text>Your Text</Text>
</View>
