在本机反应中以不同的方式对齐两个孩子 [英] Align two children differently in react native
本文介绍了在本机反应中以不同的方式对齐两个孩子的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想要一个标题,左边有一个后退按钮,标题中央有一个文本/标题.
I'd like to have a header with a back button to the left and a text/title in the center of the header.
像这样:
<View style={styles.topbar}>
<TouchableOpacity>
<Text style={styles.topbarButton}>{" <"}</Text>
</TouchableOpacity>
<View>
<Text style={styles.topbarText}>Title</Text>
</View>
</View>
我正在尝试在 styles.topbar
中使用 flex,但我尝试过的似乎没有任何效果.
I'm trying to use flex in styles.topbar
but nothing of what I tried seems to work.
我对 flex 和 React Native 还很陌生,所以对样式有一些帮助会很棒.
I am pretty new to flex and React Native so some help with the styles would be great.
谢谢大家.
推荐答案
我们开始:
<View style={{width:devicewidth,flexDirection:'row',height:40,top:0,position:'absolute'}}>
<TouchableOpacity style={{left:0,position:'absolute',alignItems:'flex- start'}}>
<Text style={styles.topbarButton}>{" <"}</Text>
</TouchableOpacity>
<View style={{justifyContent:'center'}}>
<Text style={styles.topbarText}>Title</Text>
</View>
</View>
上面的代码将在左上角打印返回按钮,在中间打印文本.Flex 方向用于指示按行方向打印的视图.
The above code will print back button at the top left and text at the center. Flex direction is used to indicate view to print in a row direction.
这篇关于在本机反应中以不同的方式对齐两个孩子的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文