我们如何将 react-navigation 标题的标题居中？答案

【问题标题】：How can we center title of react-navigation header?我们如何将 react-navigation 标题的标题居中？
【发布时间】：2017-09-05 16:56:43
【问题描述】：

React-navigation 文档还很年轻，阅读这些问题对我来说不是很有效（每个版本的更改）是否有人有一种工作方法可以在 React Native 中使用 react-navigation 在 Android 中将标题居中？

【问题讨论】：

可能有一些解决方案，但是我在我的项目中所做的我不使用 react-navigation 中的标题和选项卡。对于标题，我使用自定义标题（**反应导航选项卡的性能不是那么好*********）。
有一个titleStyleprops 可用于造型。你试过了吗？这是link。检查StackNavigator.md
我做到了，我正在尝试为所有屏幕设置默认道具，但它不起作用：/

标签： react-native react-native-android react-navigation

【解决方案1】：

警告：react-navigation 发生了很大变化，标题对齐的方式，从我的第一个答案开始已经改变了 2-3 次。

如果我的回答不适合你，请查看其他答案。

2021/08/31 修改：

在 2020 年，headerLayoutPreset 也被弃用。新方法是通过 defaultNavigationOptions：（@ThatFrenchComputerGuy 的回答帮助了我）

const AppNavigator = createStackNavigator({
    Home: { screen: HomeScreen },
 }, 
 {
  defaultNavigationOptions: {
      title: 'Aligned Center',
      headerTitleAlign: 'center'
  }
});

2019 年 3 月 12 日修改：

2018 年，在 react-navigation v2 发布后（2018 年 4 月 7 日），由于某种原因，alignSelf 不再工作。这是新的工作方式，使用headerLayoutPreset。来自@HasanSH：

const HomeActivity_StackNavigator = createStackNavigator({
    Home: {screen: Main},
}, {headerLayoutPreset: 'center'});

原答案 2017/07/11：

使用headerTitleStyle:

static navigationOptions = {
    headerTitleStyle: { alignSelf: 'center' },
    title: 'Center Title',
}

【讨论】：

对我不起作用！，我添加了 textAlign:"center",flex:1 以完成这项工作。
在 iOS 上它工作得很好，但在 Android 上却不行。添加代码使其适用于两个平台。谢谢
不适合我。我添加了 headerRight: 它对我有用
headerLayoutPreset 已弃用，已重命名为 headerTitleAlign 并移至 navigationOptions。它应该在 defaultNavigationOptions 上声明以获得相同的行为
2021 更新的答案真的很有效，非常感谢！！

【解决方案2】：

从 2021 年起，您可以使用headerTitleAlign。

虽然 headerLayoutPreset 在技术上有效，但它应该显示一条消息，通知它已被 expo 用户 弃用。实现如下：

const AppNavigator = createStackNavigator({
    Home: HomeScreen,
 }, 
 {
  defaultNavigationOptions: {
      title: 'Centered',
      headerTitleAlign: 'center'
  }
})

React-Navigation v5.x 更新： 根据@Ewan 的纠正，如果您使用的是React-Navigation v5.x，则无法将参数传递给createStackNavigator()。因此，您应该按如下方式实现它：

<Stack.Navigator screenOptions={{headerTitleAlign: 'center'}}>

【讨论】：

【解决方案3】：

要使标题标题居中，我们需要通过添加 flex 属性来获得 flex 标题。

navigationOptions: {
    title: "Title center",
    headerTitleStyle: { 
        textAlign:"center", 
        flex:1 
    },
}

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。
headerTitleStyle: { alignSelf: 'center' , textAlign:"center",flex:1 }，为我工作！

【解决方案4】：

对于任何在 2020 年搜索的人，这对我有用：

<Stack.Navigator screenOptions={{headerTitleAlign: 'center'}}>

https://reactnavigation.org/docs/stack-navigator/#headertitlealign

【讨论】：

我还得加上headerTitleStyle: { textAlign: 'center' },
适用于 react-navigation v5。
反应导航的正确（并且唯一工作）anwser >=v5（参见：reactnavigation.org/docs/stack-navigator/#headertitlealign）
谢谢。它正在工作。

【解决方案5】：

只有在左侧没有后退按钮的情况下，接受的答案才对我有效。在这种情况下，您需要在右侧设置一个空视图以使其正确居中。

static navigationOptions = {
    headerTitleStyle: { alignSelf: 'center' },
    title: 'Center Title',
    headerRight: (<View />)
}

【讨论】：

这是我最常做的事情，但我发现这是一种变通方法，不应被视为正确答案。无论如何我都赞成它，因为它很方便。
我完全同意这是一种解决方法，但我希望它不是。但我认为还没有合适的解决方案。希望它会尽快修复。
我还将 flex: 1, textAlign: 'center', 添加到 headerTitleStyle 和 headerLeft: (<View/>), AND 工作
如果两边都有按钮，这对我有用。 {headerTitleStyle: { alignSelf: 'center' }, title: 'Center Title', headerLeft: (<Icon ... />), headerRight: (<View />) }

【解决方案6】：

最好的方法是实现文档中列出的内容：在StackNavigatorConfig里面分配一个可选属性，如下：

createStackNavigator({
   { ... // your screens},
   { ...,
     headerLayoutPreset: 'center' // default is 'left'
   })

headerLayoutPreset - 指定标题组件的布局方式。

通过这样做，您根本不必弄乱样式。它将应用于该堆栈中的所有嵌套屏幕。

查看Source

【讨论】：

它可以工作并处理所有带/不带后退箭头的情况
这是最合适的答案:)
但仅适用于 react-native stackoverflow.com/a/60779193/1256697

【解决方案7】：

在defaultNavigationOptions 中插入并设置headerTitleAlign 值。以下是示例：

const MainStack = createStackNavigator(
    {
        ...

        defaultNavigationOptions: {
            headerTitleAlign: 'center',
        }
    }
)

【讨论】：

react-navigation 已更新，这是目前执行此操作的正确方法。 reactnavigation.org/docs/en/stack-navigator.html
太棒了！！...这应该是选择的答案。

【解决方案8】：

这对我有用:)

static navigationOptions = {
title: "SAMPLE",
headerTitleStyle: { flex: 1, textAlign: 'center'},

};

【讨论】：

【解决方案9】：

headerTitleStyle: {
    color: 'white',
    textAlign: 'center',
               flex: 1
}

【讨论】：

【解决方案10】：

如果您使用的是react-navigation v4

const stack = createStackNavigator({
  screen1: {screen: Screen},
},{
  defaultNavigationOptions: {
    headerTitleAlign: 'left | center',
  }
});

文档：

https://reactnavigation.org/docs/en/stack-navigator.html#headertitlealign

或者如果您使用的是react-navigation v3

const stack = createStackNavigator({
  screen1: {screen: Screen},
},{
  headerLayoutPreset: 'left | center',
});

文档：

https://reactnavigation.org/docs/en/3.x/stack-navigator.html

【讨论】：

【解决方案11】：

对于@react-navigation/native@next，我可以确认{ headerTitleAlign: 'center' } 在android 上适用于我。示例如下：

<Stack.Navigator screenOptions={{ headerTitleAlign: 'center' }}>
    <Stack.Screen name="Promo" component={PromoScreen} />
    <Stack.Screen name="Settings" component={SettingsNavigator} />
</Stack.Navigator>

【讨论】：

【解决方案12】：

我正在使用具有以下开发依赖项的反应导航，使用 alignSelf 和 textAlign 我收到警告

  "dependencies": {
"@react-native-community/masked-view": "^0.1.6",
"@react-navigation/native": "^5.0.0",
"@react-navigation/stack": "^5.0.0",
"base64-js": "^1.3.1",
"lodash": "^4.17.15",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-base64": "0.0.2",
"react-native-ble-plx": "^1.1.1",
"react-native-gesture-handler": "^1.5.6",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.2",
"react-native-screens": "^2.0.0-beta.2"

},

上述选项都不适合我，然后我尝试了属性 headerTitleAlign: 'center' 并且它起作用了。

下面是我的组件代码

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
            <Stack.Screen
              name="Home"
              component={HomeScreen}
              options={{
                title: 'Track Down',
                headerTitleAlign: 'center',
              }}
            />

          </Stack.Navigator>
        </NavigationContainer>
      );
    };

【讨论】：

【解决方案13】：

在中心设置 react-navigation 标题。使用 headerTitleStyle CSS。

static navigationOptions = {
        title: 'Home',
        headerTintColor: '#fff',
        headerTitleStyle: {
            width: '90%',
            textAlign: 'center',
        },
    };

【讨论】：

请将此作为完整的答案，而不仅仅是没有解释的代码答案。

【解决方案14】：

navigationOptions:({navigation}) =>({
                    gesturesEnabled :false,

                    headerTitleStyle : {
                            color:"white",
                            fontFamily:"OpenSans",
                            alignSelf: 'center' ,
                            textAlign: 'center',
                            flex:1
                    },
                  }),

这里。 => {flex:1 ,textAlign: 'center' and alignSelf: 'center'} 为我工作！

【讨论】：

【解决方案15】：

您应该将 headerLayoutPreset: 'center' 添加到您的 createeStackNavigator 函数中。

这是一种真正的方式：

const someStack = createStackNavigator({
ConfigurationScreen: ConfigurationScreen,
PreferencesScreen: PreferencesScreen},
{ headerLayoutPreset: 'center' });

参考： https://github.com/react-navigation/react-navigation/pull/4588

【讨论】：

【解决方案16】：

在 React Navigation v5 上，我设法使视图居中的唯一方法是像这样使用它：

 <MainStack.Navigator
  screenOptions={{
    headerTitleAlign: 'center',
  }}>

 ...

  <MainStack.Screen
    ...
    options={({navigation, route}) => ({
      headerTitle: () => <ViewButton />,
    ...
    })}

【讨论】：

【解决方案17】：

在 2020 年，如果有人像我一样遇到问题，下面的 sn-p 对我有用。

<Stack.Screen options={({ route, navigation }) => ({
          title: "Register",
          headerTitleAlign: "center")
        })}
 />

【讨论】：

【解决方案18】：

根据 ReactNavigation 5.x 版本，您可以使用带有值 center 的选项标题属性 headerTitleAlign。以下是代码示例：

<Stack.Screen name="ScreenRegister" component={ScreenRegister}
   options={{ 
       headerTitle: props => <LogoHeader {...props} />,
       headerTitleAlign: 'center'
    }} 
/>

【讨论】：

【解决方案19】：

虽然我面临同样的事情，但解决方案非常简单。我刚刚加了一行代码headerTitleAlign: 'center',

function HomeNavigator() {
  return (
    <TabOneStack.Navigator>
      <TabOneStack.Screen
        name="HomeScreen"
        component={TabOneScreen}
        options={{
          headerRightContainerStyle: {
            marginRight: 20,
          },
          headerTitleAlign: 'center',     <-------- here
          headerTitle: () => (
            <Ionicons
              name={'logo-twitter'}
              color={Colors.light.tint}
              size={30}
            />
          ),
        }}
      />
    </TabOneStack.Navigator>
  )
}

【讨论】：

【解决方案20】：

使用headerTitleContainerStyle

static navigationOptions = {
  headerTitleStyle: { justifyContent: 'center' },
}

【讨论】：

【解决方案21】：

这适用于我在 Android 和 iOS 上：

static navigationOptions = {
    headerTitleStyle: {
        textAlign: 'center',
        flexGrow: 1,
    },
    headerRight: (<View/>)
};

【讨论】：

【解决方案22】：

从 2020 年 5 月 30 日起，您不能再将任何参数传递给 createStackNavigator()。

要使您的标题居中，您必须使用以下内容（带有headerTitleAlign 属性）：

<Stack.Screen
    name="Centered"
    component={Centered}
    options={{
      title: 'Centered title',
      headerShown: true,
      headerTitleAlign:'center'
    }}
/>

【讨论】：

【解决方案23】：

这肯定适用于 android

      headerTitleStyle:{
         flex: 1, textAlign: 'center'
      },

【讨论】：

【解决方案24】：

标题样式：{ 白颜色'， textAlign: '居中', 弹性：1 }

【讨论】：

这只是重复现有的答案。新答案应为主题添加新信息和新见解。

【解决方案25】：

在navigationOptions中添加headerTitleAlign: 'center'

示例：

  static navigationOptions = ({navigation}) => ({
    headerTitle: (
      <Image
        style={{width: 100, height: 100}}
        resizeMode="contain"
        source={icons.logo}
      />
    ),
    headerTitleAlign: 'center',
  });

【讨论】：

【解决方案26】：

如果标题有超过 1 项，即 left ， right ， center 如下：

  <TabOneStack.Screen
        name="HomeScreen"
        component={TabOneScreen}
        options={{
          headerLeftContainerStyle: { marginLeft: 10 },
          headerRightContainerStyle: { marginRight: 10 },
          headerTitleContainerStyle: { backgroundColor: "yellow", alignItems: "center" },
          headerLeft: () => <ProfilePicture image="https://pbs.twimg.com/profile_images/1383042648550739968/fS6W0TvY_200x200.jpg" size={40} />,
          headerTitle: () => (<Ionicons name="logo-amazon" size={30}  />),
          headerRight: () => (<MaterialCommunityIcons name="star-four-points-outline" size={30} />)
        }}
      />

然后将alignItems:center 添加到headerTitleContainerStyle 将使标题组件居中

【讨论】：

【解决方案27】：

只需另外使用 options 属性，

<Stack.Screen
      component={HomeScreen}
      name="Skin Cancer Prediction"
      options={{
          headerTitleAlign: "center",
      }}
/>

你很高兴?

【讨论】：

【解决方案28】：

 headerTitleAlign: {
        alignItems: 'center',
        justifyContent: 'center'
      },

【讨论】：

感谢您的回答！为了帮助其他人了解您的解决方案，您能否简要说明此代码为何有效？

【解决方案29】：

使用 React Navigation v5，您还可以使用以下选项：

headerTitleAlign:'center'

就像下面的例子一样，我想将标题完美居中。

<Stack.Screen
    name="Settings"
    component={SettingsScreen}
    options={{
      title: 'SMS Recipient Number',
      headerShown: true,
      headerTitleAlign:'center'
    }}
/>

【讨论】：

【解决方案30】：

这对我来说适用于最新版本 16.9.0，

defaultNavigationOptions : {title: 'App', headerTitleAlign: 'center' }

【讨论】：