[英]Vertical text next to Horizontal Text react native?
I am basically trying to create something like this: 我基本上是试图创建这样的东西:
Two boxes, the red one is vertical text and the blue one is horizontal text. 有两个框,红色的是垂直文本,蓝色的是水平文本。 The height of the red box should be the same as the blue box
红色框的高度应与蓝色框的高度相同
I know that I can make text sideways like that by doing: 我知道我可以通过以下方式使文本横向排列:
transform: [{ rotate: '-90deg'}]
on it, but I am having issues getting the rest to work correctly and having the boxes be aligned and sized properly. 在它上面,但是我在使其余部分正确工作以及使盒子对齐和调整大小方面遇到问题。 Any help would be greatly appreciated!
任何帮助将不胜感激!
You should really try playing with the layout of React Native and post what you have tried but here's a sample code 您应该真正尝试使用React Native的布局并发布您尝试过的内容,但这是示例代码
<View style={{ height: 100, flexDirection: 'row'}}>
<View style={{ flex: 1, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center' }}><Text style={{transform: [{ rotate: '-90deg'}]}}>Value</Text></View>
<View style={{ flex: 8, backgroundColor: 'blue', alignItems: 'center', justifyContent: 'center'}}><Text>Short Text</Text></View>
</View>
So little style pointers: 这么少的样式指针:
Ohey its the same as css Ohey与CSS相同
This fiddle should get you close: https://jsfiddle.net/1f8png0r/4/ 这个小提琴应该使您接近: https : //jsfiddle.net/1f8png0r/4/
I would stay away from styling using JS at all costs - (mainly $.css()
and $.transform()
, etc) It is much slower than CSS and CSS is much easier to maintain down the road -- especially if you can learn to style your selectors nicely! (主要是-我会从不惜一切代价使用JS造型远离
$.css()
和$.transform()
等),它比CSS慢得多 ,CSS是很容易保持在道路上-特别是如果你能学会很好地为您的选择器添加样式!
To break it down a little - you want to create a .row
a .left
column and a .right
column. 要稍微细分一下-您想创建
.row
.left
列和.right
列。 Inside the .left
column you want some text. 在
.left
列内,您需要一些文本。 You want to transform that text and rotate it -- rotate(90deg)
. 您要转换该文本并旋转它
rotate(90deg)
。 I have never used the flex vs. inline-flex for this before now, but after needing to do horizontal text a handful of times I think it is the most robust IMHO. 在此之前,我从未使用过flex和inline-flex,但是在需要做几次水平文本之后,我认为这是最强大的恕我直言。
The main focus is to create the grid as you need it, and to transform the content in the left column of the grid relative to the column (rather than relative to the row). 主要重点是根据需要创建网格,并相对于列(而不是相对于行)转换网格左列中的内容。
Hopefully this helps get you closer, cheers! 希望这可以帮助您拉近距离,加油!
<div class="row">
<div class="left">
<span class="h-text">LEFT</span>
</div>
<div class="right">RIGHT</div>
</div>
.row {
width: 756px;
height: 100px;
border: 2px solid green;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.right {
width: 80%;
height: 100%;
background: red;
display: inline-flex;
justify-content: center;
align-items: center;
}
.left {
width: 20%;
height: 100%;
background: blue;
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
}
.left .h-text {
position: absolute;
transform: rotate(-90deg);
}
I implemented this way giving fixed height and some tweak with flex: 我实现了这种方式,以提供固定的高度和flex的一些调整:
<View style={{flex: 1, paddingTop: 40}}>
<View style={{ flexDirection: 'row', height: 100 }}>
<View style={{ backgroundColor: 'red', justifyContent: 'center' }}>
<Text
style={{
textAlign: 'center',
transform: [{ rotate: '-90deg' }],
}}>
Value
</Text>
</View>
<View
style={{
flex: 1,
backgroundColor: 'aqua',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text>Some text here....</Text>
</View>
</View>
</View>
Here is the link to snack if you want to play around. 如果您想玩耍,这里是小吃的链接。 Might have extra unnecessary styles.
可能有多余的样式。 You can play with it in the snack.
您可以在零食中玩。
I hope, you got the idea? 我希望你有主意吗?
https://snack.expo.io/@roshangm1/humiliated-cookies https://snack.expo.io/@roshangm1/humiliated-cookies
you could do this. 你可以做到这一点。
https://codepen.io/anon/pen/yGepmm https://codepen.io/anon/pen/yGepmm
This is an aproach using flexbox. 这是使用flexbox的方法。 I use sass for clear syntax (no ; )
我使用sass获得清晰的语法(否;)
.sass .sass
div:first-child
display: flex
justify-content: center
align-items: center
transform: rotate(270deg)
width: 100px
background: blue
color: white
text-align: center
vertical-align: middle
div:nth-child(2)
display: flex
padding-left: 2rem
background: lightgreen
justify-content: start-end
align-items: center
color: grey
height: 91px
width: 100%
.html .html
<section>
<div>
Value
</div>
<div>
Lorem Ipsum
</div>
</section>
It's a very less code implementation, you will have to calculate for now, manually the: 这是一个非常少的代码实现,您现在必须手动计算:
div:first-child
(which it's the width because the rotation). div:first-child
高度(它是宽度,因为旋转)。 div:nth-child(2)
. div:nth-child(2)
。 Hope this helps 希望这可以帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.