美文网首页
2019-03-18 react-navigation 去除导航

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

作者: 太阳的小号 | 来源:发表于2019-03-18 18:45 被阅读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,
      };
    

    相关文章

      网友评论

          本文标题:2019-03-18 react-navigation 去除导航

          本文链接:https://www.haomeiwen.com/subject/doibmqtx.html