Question

使用堆栈导航，我已经通过将标题设为以下子组件来定义标题Title

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

我遇到了同样的问题，这是解决方法：

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

Answer 3

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

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

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

Answer 4

对我来说，它可以添加：

    marginRight: 'auto',
    marginLeft: 'auto'

.. 到headerTitleStyle

无法在本机android中居中对齐标题标题

4 个答案: