69

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

4

34 回答 34

123

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

如果我的回答对您不起作用,请查看其他答案。

2021/08/31 修改:

在 2020 年,headerLayoutPreset也被弃用了。新方法是通过 defaultNavigationOptions:(@ThatFrenchComputerGuy 的回答帮助了我)

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

2019/03/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',
}

在此处输入图像描述

于 2017-07-11T06:36:46.960 回答
113

自 2021 年起,您可以使用headerTitleAlign

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

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'}}>

这是它工作的图像

于 2020-01-20T04:38:31.803 回答
60

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

navigationOptions: {
    title: "Title center",
    headerTitleStyle: { 
        textAlign:"center", 
        flex:1 
    },
}
于 2018-04-23T04:36:54.103 回答
40

对于任何在 2020 年搜索的人,这对我有用:

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

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

于 2020-03-20T17:49:43.307 回答
31

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

static navigationOptions = {
    headerTitleStyle: { alignSelf: 'center' },
    title: 'Center Title',
    headerRight: (<View />)
}
于 2018-02-08T15:49:16.733 回答
24

最好的方法是实现文档中列出的内容: 在StackNavigatorConfigassign 一个可选属性中,如下所示:

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

headerLayoutPreset- 指定如何布置标题组件。

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

检查来源

于 2018-09-15T10:43:58.040 回答
10

在 中插入并设置headerTitleAligndefaultNavigationOptions。以下是示例:

const MainStack = createStackNavigator(
    {
        ...

        defaultNavigationOptions: {
            headerTitleAlign: 'center',
        }
    }
)
于 2020-01-06T14:20:47.267 回答
8

这对我有用:)

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

};

于 2019-05-09T05:10:21.853 回答
4
headerTitleStyle: {
    color: 'white',
    textAlign: 'center',
               flex: 1
}
于 2018-09-20T12:40:50.860 回答
4

如果你正在使用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

于 2020-01-26T21:25:33.693 回答
4

因为,我可以在 android 上@react-navigation/native@next确认适合我的作品。{ headerTitleAlign: 'center' }下面的例子:

<Stack.Navigator screenOptions={{ headerTitleAlign: 'center' }}>
    <Stack.Screen name="Promo" component={PromoScreen} />
    <Stack.Screen name="Settings" component={SettingsNavigator} />
</Stack.Navigator>
于 2020-02-04T02:18:42.567 回答
4

我正在使用具有以下开发依赖项的反应导航,使用 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: 'centre'并且它有效。

下面是我的组件代码

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

          </Stack.Navigator>
        </NavigationContainer>
      );
    };
于 2020-02-08T23:54:51.707 回答
3

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

static navigationOptions = {
        title: 'Home',
        headerTintColor: '#fff',
        headerTitleStyle: {
            width: '90%',
            textAlign: 'center',
        },
    };
于 2018-04-25T05:26:05.917 回答
3
navigationOptions:({navigation}) =>({
                    gesturesEnabled :false,

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

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

于 2019-02-25T13:09:34.103 回答
3

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

这是一种真正的方式:

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

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

于 2019-04-25T15:38:18.647 回答
3

在 React Navigation v5 上,我设法使 View 居中的唯一方法是像这样使用它:

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

 ...

  <MainStack.Screen
    ...
    options={({navigation, route}) => ({
      headerTitle: () => <ViewButton />,
    ...
    })}
于 2020-02-18T11:36:37.463 回答
3

在 2020 年,如果有人像我一样遇到问题,下面的片段对我有用。

<Stack.Screen options={({ route, navigation }) => ({
          title: "Register",
          headerTitleAlign: "center")
        })}
 />
于 2020-08-10T14:34:23.213 回答
3

根据 ReactNavigation 的 5.x 版本,您可以将选项标头属性headerTitleAlign与 value center一起使用。以下是代码示例:

<Stack.Screen name="ScreenRegister" component={ScreenRegister}
   options={{ 
       headerTitle: props => <LogoHeader {...props} />,
       headerTitleAlign: 'center'
    }} 
/>
于 2020-09-08T10:02:51.567 回答
3

虽然我面临同样的事情,但解决方案非常简单。我只是添加了一行代码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>
  )
}
于 2021-06-24T09:27:54.420 回答
2

使用headerTitleContainerStyle

static navigationOptions = {
  headerTitleStyle: { justifyContent: 'center' },
}
于 2019-01-10T14:22:54.453 回答
2

这适用于我在 Android 和 iOS 上:

static navigationOptions = {
    headerTitleStyle: {
        textAlign: 'center',
        flexGrow: 1,
    },
    headerRight: (<View/>)
};
于 2019-08-21T17:17:43.377 回答
2

自 2020 年 5 月 30 日起,您不能再将任何参数传递给createStackNavigator().

要使您的标题居中,您必须使用以下内容(与headerTitleAlign属性):

<Stack.Screen
    name="Centered"
    component={Centered}
    options={{
      title: 'Centered title',
      headerShown: true,
      headerTitleAlign:'center'
    }}
/>
于 2020-05-30T16:34:19.400 回答
1

这肯定适用于android

      headerTitleStyle:{
         flex: 1, textAlign: 'center'
      },
于 2019-08-07T07:57:08.097 回答
1

headerTitleStyle:{颜色:“白色”,textAlign:“中心”,flex:1}

于 2019-10-03T11:49:16.033 回答
1

加入headerTitleAlign: 'center'_navigationOptions

例子:

  static navigationOptions = ({navigation}) => ({
    headerTitle: (
      <Image
        style={{width: 100, height: 100}}
        resizeMode="contain"
        source={icons.logo}
      />
    ),
    headerTitleAlign: 'center',
  });
于 2020-04-17T20:20:49.503 回答
1

如果标题有超过 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:centerheaderTitleContainerStyle将使标题组件居中在此处输入图像描述

于 2021-05-08T08:57:50.977 回答
1

只需另外使用options属性,

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

你可以走了

于 2021-05-24T16:03:52.387 回答
0

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

为我工作

于 2019-12-19T09:37:51.683 回答
0
 headerTitleAlign: {
        alignItems: 'center',
        justifyContent: 'center'
      },
于 2020-02-12T16:49:52.377 回答
0

使用React Navigation v5,您还可以使用以下选项:

headerTitleAlign:'center'

就像在下面的示例中,我想将标题完美居中。

<Stack.Screen
    name="Settings"
    component={SettingsScreen}
    options={{
      title: 'SMS Recipient Number',
      headerShown: true,
      headerTitleAlign:'center'
    }}
/>
于 2020-04-14T23:35:19.773 回答
0

只需最新版本 16.9.0 对我有用,

defaultNavigationOptions : {title: 'App', headerTitleAlign: 'center' }
于 2020-05-11T15:30:34.393 回答
0

在反应导航 V5

<AuthStack.Screen
  name="SignupScreen"
  component={SignupScreen}
  options={{ title: "Sign Up", animationEnabled: false, headerTitleAlign: 'center', }}
/>
于 2020-08-28T18:42:28.227 回答
-3

确保在导致堆栈溢出之前检查问题,通常更有帮助。关于您的问题的问题但是正如 himanshu 在评论中所说,您需要访问标题样式属性以根据需要调整标题。

static navigationOptions = {
    header: (navigation) => ({
      title: <Text style={{ 
            color: 'rgba(0, 0, 0, .9)', 
            fontWeight: Platform.OS === 'ios' ? '600' : '500',  
            fontSize: Platform.OS === 'ios' ? 17 : 18, 
            alignSelf: 'center' 
         }}>Filters</Text>,
      right: <SearchButton />,
      left: <CancelButton />,
    })
  };

如问题所示,我认为您已经设法找到解决方案,因为这是不久前的事情。但对于遇到此问题的其他人来说,它可能会有所帮助。

于 2017-05-29T11:39:59.473 回答
-4

您可以使用此文件更改在反应导航的堆栈导航器中设置 android 的标题标题中心:

node_modules\react-navigation\src\views\Header.js

在 Header.js 文件中更改此代码:-

title: {
bottom: 0,
left: TITLE_OFFSET,
right: TITLE_OFFSET,
top: 0,
position: 'absolute',
alignItems: Platform.OS === 'ios' ? 'center' : 'center',
},
于 2017-05-29T09:38:09.770 回答