无法在react本机android中对齐标题标题。

Question

使用堆栈导航，我定义了标题标题，使其成为子组件，如下所示

Headertitle.js

render(){
   return(
        <View style={{flexDirection:'row',justifyContent:'center'}}>
        <Text style={{fontSize:RF(3),fontWeight:'bold',color:'#fff'}}>XYZ</Text>
        <Text style={{fontSize:RF(3),color:'#fff'}}>ABC</Text>
        </View>
)}

使用此标头的父组件

 static navigationOptions = ({ navigation }) => {
              return {
                headerTitle:(<Headertitle/>),
                headerTitleStyle: {flex: 1, textAlign: 'center'},
                headerRight: (
                  <Icon
                    onPress={navigation.getParam('handleLogout')}
                    name="power-off"
                    type="font-awesome"
                    color="#fff"
                     style={{marginRight:20}}
                    size={RF(4)}
                    backgroundColor="#006DB7"
                  />
                ),

                headerLeft:null
              };
            };

它在IOS中运行得很好，但不能在Android中对齐。请帮帮忙。事先鸣谢

Answer 1

导航器中有一个新的选项。

createStackNavigator(routes, { headerLayoutPreset: 'center' })

以下是拉请求：https://github.com/react-navigation/react-navigation/pull/4588

Answer 2

我们可以通过设置导航选项的headerTitleAlign属性来做到这一点。

navigation.setOptions({ 
    headerTitleAlign: 'center'
});

默认设置为以iOS为中心，以安卓为左。

Answer 3

对我来说，它努力补充：

    marginRight: 'auto',
    marginLeft: 'auto'

。。转到headerTitleStyle