无法在 react-native android 中居中对齐标题标题

Question

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

标题标题.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

对我来说，它可以添加：

    marginRight: 'auto',
    marginLeft: 'auto'

.. 到 headerTitleStyle

Answer 3

我有同样的问题，这里是解决方案：

    headerLeft: (<View></View>),
    headerRight: (<View></View>),
    headerTitleStyle: {
      color : APP_COLORS.primary, 
      display: 'flex',
      flex: 1,
      textAlign: 'center',
      fontWeight: 'normal',
      fontSize: 15,
    }

Answer 4

我们可以通过设置导航选项的headerTitleAlign属性来实现。

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

默认在 iOS 上居中，在 Android 上左。