react native Navigator 隐藏、自定义

最新推荐文章于 2025-07-16 10:43:50 发布

原创最新推荐文章于 2025-07-16 10:43:50 发布 · 7.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react-native #navigator #隐藏 #自定义 #android

react-native 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何解决React Native Navigator在Android上导航栏位置偏移的问题，并展示如何通过继承和重写`Navigator.NavigationBar`来自定义导航栏，实现中间对齐及添加额外元素的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直奔主题：在使用React Native Navigator的时候，很多同学跟我一样，上来就用，但是用了发现一个问题，那就是如下图：

这里写图片描述

看到此处登录的文字，为毛android上就要跑偏了，当然毕竟使系统的问题，但是对于我们要求必须在中间的怎么办，我还想在navigator上添加其他的图片按钮等等，怎么办？看看效果，其实我们更希望是这样的：

这里写图片描述

当然，这里做的是使用官方的navigator api 而不是自己在页面中模仿的一个view，不然下面说的也没有任何意义，直接上图片代码和源码:

这里写图片描述

///自定义路由导航
class NavigationBar extends Navigator.NavigationBar {
  render() {
    var routes = this.props.navState.routeStack;

    if (routes.length) {
      var route = routes[routes.length - 1];
//返回null，导航将会消失，也就达到了隐藏导航栏的目的
      if (route.display === false) {
        return null;
      }else{
        // return super.render(); //这是调用系统提供的UI,我们不管直接注释掉，自己写一个自己需要的
        return (
            <View style={{position:'absolute',top:0,left:0,width:width,height:Platform.OS === 'ios' ? 64 : 56,backgroundColor:'#f9f9f9',paddingTop:Platform.OS === 'ios' ? 20 : 20,justifyContent:'center',alignItems:'center'}}>
                <View>
                    <Text>{route.name}</Text>
                </View>
            </View>
        );
      }
    }
  }
}