我们如何才能中心标题的反应导航标题？

You can set the header title center for android in stack navigator of react navigation using this file change:

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

Change This Code In Header.js file:-

title: {
bottom: 0,
left: TITLE_OFFSET,
right: TITLE_OFFSET,
top: 0,
position: 'absolute',
alignItems: Platform.OS === 'ios' ? 'center' : 'center',
},

Make sure to check the issues before resulting to stack overflow, normally more helpful.issue regarding your problem But as himanshu said in comments you need to access the title style property to adjust the title how you want.

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 />,
})
};

As shown in the issue, i presume you've already managed to find a solution as this was a while ago. But for anyone else coming across this issue it may be helpful.

Warning: react-navigation changes a lot, the way to do title align, already changed for like 2-3 times from my first answer of it.

If my answer doesn't work for you, please see other answers.

Modified 2021/08/31:

In year of 2020, headerLayoutPreset was also deprecated. The new way is via defaultNavigationOptions: (@ThatFrenchComputerGuy's answer helped me)

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

Modified 2019/03/12:

In year of 2018, after react-navigation v2 release (7 Apr 2018), for some reason alignSelf was not working anymore. Here it is the new working way, using headerLayoutPreset. from @HasanSH:

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

Original Answer 2017/07/11:

Use headerTitleStyle:

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

The accepted answer only works for me if there isn't a back button present on the left-hand side. In that case, you need to set an empty View to the right-hand side to properly center it.

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

To center the header title, we need to have flex header by add flex property.

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

Set react-navigation header title in the center. Using the headerTitleStyle CSS.

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

The best way to do that is by implementing what is listed in the documentation: Inside the StackNavigatorConfig assign an optional property, as follows:

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

headerLayoutPreset - Specifies how to lay out the header components.

By doing this you don't have to mess up with the styling at all. And it would be applied to all the nested screens in that stack.

Check the Source

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

Use headerTitleContainerStyle

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

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


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

here . => {flex:1 ,textAlign: 'center' and alignSelf: 'center'} works for me!

You should add headerLayoutPreset: 'center' to your createeStackNavigator function.

This is the one true way:

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

Reference: https://github.com/react-navigation/react-navigation/pull/4588

This worked for me :)

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

};

This will definately work for android

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

This works for me on Android & iOS:

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

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

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

worked for me

Insert and set the headerTitleAlign value in defaultNavigationOptions. Here is the examples:

const MainStack = createStackNavigator(
{
...


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

As of 2021, you can use headerTitleAlign.

Although headerLayoutPreset technically works, it should display a message informing that it is deprecated for expo users. The implementation is as follows:

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

React-Navigation v5.x Update: As per @Ewan ' s rectification, if you are using React-Navigation v5.x, you cannot pass parameters to createStackNavigator(). Therefore, you should implement it as follows:

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

if you're using react-navigation v4

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

Docs:

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

or if you're using react-navigation v3

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

Docs:

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

for @react-navigation/native@next, I can confirm { headerTitleAlign: 'center' } works for me on android. Example below:

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

I am using react navigation with below dev dependencies, with alignSelf and textAlign I was getting warnings

  "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"

},

none of above option worked for me, then I tried property headerTitleAlign: 'centre' and it worked.

below is my component code

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


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

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

On React Navigation v5 the only way I managed to center a View was to use it like this:

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


...


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

For anyone searching in 2020, this is working for me:

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

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

Working with React Navigation v5 you can also use the following option:

headerTitleAlign:'center'

Like in the below example where I wanted to perfectly center the title.

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

add headerTitleAlign: 'center' in navigationOptions

example:

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

Simply this works for me with latest version 16.9.0,

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

As of 30th May 2020, you can't no more pass any parameters to createStackNavigator().

To center your title, you have to use the following (with the headerTitleAlign property):

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

In the year 2020, if anyone had a problem as I did, below piece of snippet worked for me.

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

In react navigation V5

<AuthStack.Screen
name="SignupScreen"
component={SignupScreen}
options=\{\{ title: "Sign Up", animationEnabled: false, headerTitleAlign: 'center', }}
/>

As per version 5.x of ReactNavigation, you can use option header attribute headerTitleAlign with value center. Here is example of the code:

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

If the header has more than 1 item ie left , right , center as below :

  <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} />)
}}
/>

then adding alignItems:center to headerTitleContainerStyle will center the title component

just use options property additionally,

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

you're good to go 🙂

While I was facing the same thing but the solution is pretty easy. I just added one line of code 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>
)
}

For React Navigation V6 Following is working fine for me:

<Stack.Navigator screenOptions=\{\{ headerTitleAlign: "center" }}>
// Put all of your screens here <Stack.Screen ... />
</Stack.Navigator>

we can achieve this with

headerTitleStyle :{ alignSelf:"center" };