升级到expo SDK 37.0.0后,我的stackNavigator标头的高度增加了一倍 [英] After upgrading to expo SDK 37.0.0 my stackNavigator header doubled in height
问题描述
"expo": "^37.0.0",
"react-dom": "16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-navigation": "^4.0.9",
"react-navigation-drawer": "^2.3.3",
"react-navigation-stack": "^1.10.3",
"react-navigation-tabs": "^2.6.0"
我面临一个非常奇怪的问题.我的stackNavigator标头太高.升级到37.0.0世博会后,我的标题栏的高度加倍,无法将其恢复为正常.
I am facing very weird issue. My stackNavigator header is too high. After upgrading to expo 37.0.0 my header bar doubled in height and I cannot return it to normal.
这是我的stackNavigator代码:
Here is my code for stackNavigator:
const DashboardStack = createStackNavigator(
{
DashboardDrawer: { screen: DashboardDrawerNavigator }
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
headerStyle: {
backgroundColor: 'red',
// height: 1,
...Platform.select({
ios: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.2,
paddingTop: 0,
},
android: {
elevation: 3,
headerPressColorAndroid: '#111',
paddingTop: 0,
},
}),
},
headerTintColor: '#111',
headerTitleStyle: {
color: '#999',
},
headerLeftContainerStyle: {
},
headerLeft: (
<Icon
containerStyle={styles.burgerMenuIcon}
onPress={() => navigation.toggleDrawer()}
name="menu"
type="material-community"
size={30}
color={'#999'}
underlayColor={'#111'}
/>)
}
},
}
);
export default createAppContainer(DashboardStack);
const styles = StyleSheet.create({
burgerMenuIcon: {
paddingLeft: 20,
// paddingTop: 0,
// marginTop: 0,
},
});
这是它的外观:
即使将高度设置为0,标题仍然可见:
The header is still visible even if I set the height to 0:
p.s.标头为红色以提高可见度.
p.s. header is red for better visibility.
推荐答案
在导航选项中使用以下道具为我解决了此问题:
Using the following prop in the navigation options fixed the issue for me:
navigationOptions: {
headerForceInset: { vertical: 'never' },
}
根据我对react-navigation docs 的理解,SafeAreaView组件围绕应用程序的内容,但是为什么我在顶部仍然创建一个烦人的小栏?
From what I understood from react-navigation docs it creates a SafeAreaView component around the app's content, however why does it create this annoying small bar on the top is still unknown to me.
这篇关于升级到expo SDK 37.0.0后,我的stackNavigator标头的高度增加了一倍的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!