2019-03-18 react-navigation 去除导航阴影

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,
  };
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,273评论 4 61
  • 今天光谱的释放和白狗无条件的爱,指引你关注自己内心的情绪能量,将无条件的爱给到自己。以爱融化所有,因为爱即自由。 ...
    艾人家家Aileen_LiLi阅读 388评论 0 0
  • 傻子是村里人叫的,其实他有名字,叫老根。 我问过奶奶老根是怎么傻的? 奶奶说发烧烧傻的。深更半夜的发高烧,家里人又...
    季动阅读 1,662评论 37 38
  • “大妈,我要吃肉。”侄子说。我赶快给她煮熟了鸡肉。他用手撕着吃,我在一边继续做其他的菜。忽然,我的后背被什么东西砸...
    兰儿悠悠阅读 283评论 0 8
  • 细节决定结果,心态决定命运,每天要保持平静的心态做事对人。在工作中不论你的能力有多大,看你的心态正不正。同样的事用...
    付超奎阅读 342评论 0 0