[英]Can't center title in react navigation stack - React-Native?
我无法在 react-navigation V4+ 中将标题居中，在使用 v3 之前它的工作正常，当使用 RN-stack 时，由于某种我不知道的原因，我无法将标题居中。
它只是出现在右边，
我在headerTitleStyle和headerStyle尝试这些
justifyContent, alignItems and alignSelf but not works :/
如果你有任何想法告诉我？
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-navigation-stack": "^2.0.16",
"react-native-screens": "^2.0.0-alpha.29",
这是代码
static navigationOptions = ({navigation}) => {
const showModal = navigation.getParam('showModal', () => {});
return {
title: navigation.getParam('title'),
headerTitleStyle: {
fontFamily: 'Cairo-Regular',
fontSize: Platform.OS == 'ios' ? 16 : 18,
color: '#fff',
flex: 1,
textAlign: 'center',
},
headerStyle: {
backgroundColor: navigation.getParam('color'),
},
headerRight: (
<Grid>
<Row>
<Body>
<Button
transparent
icon
onPress={() => {
navigation.openDrawer();
}}>
<Icon
name="ios-menu"
type="Ionicons"
style={{fontSize: 25, color: '#fff'}}
/>
</Button>
</Body>
{!navigation.getParam('title').includes('details') && (
<Body>
<Button transparent icon onPress={() => showModal()}>
<Icon
name="more"
type="Ionicons"
style={{fontSize: 25, color: '#fff'}}
/>
</Button>
</Body>
)}
</Row>
</Grid>
),
headerLeft: (
<Grid>
<Row>
<Body>
<Button
transparent
icon
onPress={() => {
navigation.pop();
}}>
<Icon
name="arrow-round-back"
type="Ionicons"
style={{
fontSize: Platform.OS == 'ios' ? 30 : 25,
color: '#fff',
}}
/>
</Button>
</Body>
<Body>
<Button
transparent
icon
onPress={() => {
navigation.navigate('search');
}}>
<Icon
name="search"
type="Ionicons"
style={{
fontSize: Platform.OS == 'ios' ? 30 : 25,
color: '#fff',
}}
/>
</Button>
</Body>
</Row>
</Grid>
),
};
};
您需要使用headerTitleAlign
https://reactnavigation.org/docs/en/stack-navigator.html#headertitlealign
在 react-native: "0.60.0" 中更新版本后，我们可以像这样处理标题标题..under DefaultNavigationOptions
const navigator = createStackNavigator({
IndexScreen : IndexScreen,
},{
initialRouteName:"IndexScreen",
defaultNavigationOptions:{
title:"Blogs",
headerTitleAlign:"center"
}
});
找不到模块：无法解析'@react-navigation/stack' React-Native
[英]Module not found: Can't resolve '@react-navigation/stack' React-Native
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.