react native 中的居中问题

最新推荐文章于 2022-08-29 16:40:27 发布

哞哞陈

最新推荐文章于 2022-08-29 16:40:27 发布

阅读量7.6k

点赞数

分类专栏： reactnative android 文章标签：布局 reactnative layout 居中

本文链接：https://blog.csdn.net/AlertColby/article/details/79925993

版权

在React Native中创建一个标题栏，期望实现文字居中，图标居右的效果，遇到布局挑战。常规的相对布局无法直接实现，通过使用justifyContent: 'space-between'和alignItems: 'center'虽能部分解决，但导致文字轻微偏左。另一种方法是利用绝对布局，创建两个父容器并分别设置不同的justifyContent属性，以实现更灵活的布局效果。

摘要由CSDN通过智能技术生成

常规方法遇到的问题：中间文字不能居中。

我本意是想自己写一个标题栏，中间是文字，右边是图标，左边没有内容。

常规想法是写一个View做标题栏的容器，里面有一个文本控件，一个图片控件，再对相应的控件做居中和向右对齐，但是在相对布局中发现没有这种属性可以支持。
常规方法还是一个容器组件中有一个空View组件为占位视图，一个文本控件，一个图片控件，再在容器组件中使用样式justifyContent为space-between就在主轴方向上排列好了，再使用alignItems为center就在次轴方向上居中了。这种方式因为左边的还是空视图，所以中间的文字会向左偏移一定量，如果要用这种方式实现左边也需要一个空的宽度跟右边一致的控件占位。

使用这种方式得到一个例子：

<View style={
  { height:60,backgroundColor:'#9ACD32',flexDirection:'row' ,justifyContent:'space-between',alignItems:'center'}}>
    <View style={
  { width:30, height:30}}/>
    <Text style={
  { fontSize:20}}>交流</Text>
    <View style={
  { width:30, height:30 ,justifyContent:'center' , alignItem