React-navigation 文档还很年轻,阅读这些问题对我来说不是很有效(每个版本的更改)是否有人有一种工作方法可以react-navigation
在 React Native 中使用 Android 中的标题居中?
34 回答
警告: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:
static navigationOptions = {
headerTitleStyle: { alignSelf: 'center' },
title: 'Center Title',
}
自 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'}}>
要使标题标题居中,我们需要通过添加 flex 属性来获得 flex 标题。
navigationOptions: {
title: "Title center",
headerTitleStyle: {
textAlign:"center",
flex:1
},
}
对于任何在 2020 年搜索的人,这对我有用:
<Stack.Navigator screenOptions={{headerTitleAlign: 'center'}}>
https://reactnavigation.org/docs/stack-navigator/#headertitlealign
如果左侧没有后退按钮,则接受的答案仅对我有效。在这种情况下,您需要在右侧设置一个空视图以使其正确居中。
static navigationOptions = {
headerTitleStyle: { alignSelf: 'center' },
title: 'Center Title',
headerRight: (<View />)
}
最好的方法是实现文档中列出的内容: 在StackNavigatorConfig
assign 一个可选属性中,如下所示:
createStackNavigator({
{ ... // your screens},
{ ...,
headerLayoutPreset: 'center' // default is 'left'
})
headerLayoutPreset
- 指定如何布置标题组件。
通过这样做,您根本不必弄乱样式。它将应用于该堆栈中的所有嵌套屏幕。
检查来源
在 中插入并设置headerTitleAlign
值defaultNavigationOptions
。以下是示例:
const MainStack = createStackNavigator(
{
...
defaultNavigationOptions: {
headerTitleAlign: 'center',
}
}
)
这对我有用:)
static navigationOptions = {
title: "SAMPLE",
headerTitleStyle: { flex: 1, textAlign: 'center'},
};
headerTitleStyle: {
color: 'white',
textAlign: 'center',
flex: 1
}
如果你正在使用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
因为,我可以在 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>
我正在使用具有以下开发依赖项的反应导航,使用 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>
);
};
在中心设置 react-navigation 标题。使用 headerTitleStyle CSS。
static navigationOptions = {
title: 'Home',
headerTintColor: '#fff',
headerTitleStyle: {
width: '90%',
textAlign: 'center',
},
};
navigationOptions:({navigation}) =>({
gesturesEnabled :false,
headerTitleStyle : {
color:"white",
fontFamily:"OpenSans",
alignSelf: 'center' ,
textAlign: 'center',
flex:1
},
}),
这里 。=>{flex:1 ,textAlign: 'center' and alignSelf: 'center'}
为我工作!
您应该将 headerLayoutPreset: 'center' 添加到您的 createeStackNavigator 函数中。
这是一种真正的方式:
const someStack = createStackNavigator({
ConfigurationScreen: ConfigurationScreen,
PreferencesScreen: PreferencesScreen},
{ headerLayoutPreset: 'center' });
参考: https ://github.com/react-navigation/react-navigation/pull/4588
在 React Navigation v5 上,我设法使 View 居中的唯一方法是像这样使用它:
<MainStack.Navigator
screenOptions={{
headerTitleAlign: 'center',
}}>
...
<MainStack.Screen
...
options={({navigation, route}) => ({
headerTitle: () => <ViewButton />,
...
})}
在 2020 年,如果有人像我一样遇到问题,下面的片段对我有用。
<Stack.Screen options={({ route, navigation }) => ({
title: "Register",
headerTitleAlign: "center")
})}
/>
根据 ReactNavigation 的 5.x 版本,您可以将选项标头属性headerTitleAlign与 value center一起使用。以下是代码示例:
<Stack.Screen name="ScreenRegister" component={ScreenRegister}
options={{
headerTitle: props => <LogoHeader {...props} />,
headerTitleAlign: 'center'
}}
/>
虽然我面临同样的事情,但解决方案非常简单。我只是添加了一行代码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>
)
}
static navigationOptions = {
headerTitleStyle: { justifyContent: 'center' },
}
这适用于我在 Android 和 iOS 上:
static navigationOptions = {
headerTitleStyle: {
textAlign: 'center',
flexGrow: 1,
},
headerRight: (<View/>)
};
自 2020 年 5 月 30 日起,您不能再将任何参数传递给createStackNavigator()
.
要使您的标题居中,您必须使用以下内容(与headerTitleAlign
属性):
<Stack.Screen
name="Centered"
component={Centered}
options={{
title: 'Centered title',
headerShown: true,
headerTitleAlign:'center'
}}
/>
这肯定适用于android
headerTitleStyle:{
flex: 1, textAlign: 'center'
},
headerTitleStyle:{颜色:“白色”,textAlign:“中心”,flex:1}
加入headerTitleAlign: 'center'
_navigationOptions
例子:
static navigationOptions = ({navigation}) => ({
headerTitle: (
<Image
style={{width: 100, height: 100}}
resizeMode="contain"
source={icons.logo}
/>
),
headerTitleAlign: 'center',
});
如果标题有超过 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} />)
}}
/>
只需另外使用options属性,
<Stack.Screen
component={HomeScreen}
name="Skin Cancer Prediction"
options={{
headerTitleAlign: "center",
}}
/>
你可以走了
headerTitleStyle :{textAlign: 'center', flex: 1}
为我工作
headerTitleAlign: {
alignItems: 'center',
justifyContent: 'center'
},
使用React Navigation v5,您还可以使用以下选项:
headerTitleAlign:'center'
就像在下面的示例中,我想将标题完美居中。
<Stack.Screen
name="Settings"
component={SettingsScreen}
options={{
title: 'SMS Recipient Number',
headerShown: true,
headerTitleAlign:'center'
}}
/>
只需最新版本 16.9.0 对我有用,
defaultNavigationOptions : {title: 'App', headerTitleAlign: 'center' }
在反应导航 V5
<AuthStack.Screen
name="SignupScreen"
component={SignupScreen}
options={{ title: "Sign Up", animationEnabled: false, headerTitleAlign: 'center', }}
/>
确保在导致堆栈溢出之前检查问题,通常更有帮助。关于您的问题的问题但是正如 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 />,
})
};
如问题所示,我认为您已经设法找到解决方案,因为这是不久前的事情。但对于遇到此问题的其他人来说,它可能会有所帮助。
您可以使用此文件更改在反应导航的堆栈导航器中设置 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',
},