2019-03-18 react-navigation 去除导航
2019-03-18 本文已影响0人
太阳的小号
react-navigation 去除导航阴影(如有同学使用了headerTransparent使得导航栏背景颜色变透明,会有一条阴影出现),导航栏下面的阴影,iOS 和 Android 实现的原理是不一样的
iOS 是通过设置 borderBottomWidth
borderBottomColor
来实现的
将iOS 中将 borderBottomWidth
设置为 0 即可去除阴影
Android是通过阴影来实现的
将Android中设置 shadowOpacity
为 0 即可,或者 elevation
: 0 可也以
所以在 headerStyle
中按照如下设置即可:
let platformContainerStyles;
if (Platform.OS === 'ios') {
platformContainerStyles = {
borderBottomWidth: 0, //修改的地方
borderBottomColor: '#A7A7AA',
};
} else {
platformContainerStyles = {
shadowColor: 'black',
shadowOpacity: 0, //修改的地方
shadowRadius: 0,
shadowOffset: {
height: 0,
},
elevation: 4,
};
}
...........
static navigationOptions = {
title: 'Home',
headerStyle: platformContainerStyles,
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
headerTransparent: true,
};