react native 中的居中问题

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

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

1. 常规想法是写一个View做标题栏的容器，里面有一个文本控件，一个图片控件，再对相应的控件做居中和向右对齐，但是在相对布局中发现没有这种属性可以支持。  
2.  常规方法还是一个容器组件中有一个空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' , alignItems:'center',marginRight:10,}}>
      {/*这里使用flex：1不知道为什么Image控件会拉伸，如果使用width:30, height:30 则不会。*/}
      <Image style={{ flex:1 }} source={imgs.search} resizeMode={ Image.resizeMode.contain }/>
    </View>
</View>

3. 还有一种方式就是利用绝对布局，在标题栏部分添加两个父容器，里面分别添加相应的组件，然后分别对两个父容器使用justContent设置样式：flex-start , center, flex-end即可。 这种方式重用性要好一点， 因为可以设置 不同的尺寸和组件。 

例如：  

<View style={ styles.title }>
    <View style={styles.titleCenter}>
        <Text style={ styles.titleTxt }>交流</Text>
    </View>
    <View style={styles.titleRitht}>
        <Image style={ styles.titleRightIcon } source={imgs.search} resizeMode={ Image.resizeMode.contain }/>
    </View>
</View>

样式部分：  

title:{
        height:60,
        width: screenSize.width,
        backgroundColor:'#9ACD32',
        flexDirection:'row'
    },
titleCenter:{
        height:60,
        width: screenSize.width,
        position:'absolute',
        alignItems:'center',
        justifyContent:'center',
    },
titleRitht:{
        height:60,
        width: screenSize.width,
        position:'absolute',
        top:0,
        left:0,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'flex-end',
        paddingRight:8,
    }