用React Native自定义一个导航栏

设计开发过程中，导航栏都会有所不同，这时候使用RN就需要自定义一个想要的导航栏了，RN中文网有讲专门ios的导航栏（NavigatorIOS），可以不用自定义。

首先定义自定义导航栏的一些属性的约束，记得npm install --save prop-types然后引入import PropTypes from 'prop-types';

然后设置逻辑，组装出一个导航栏的模样，下面这样就是组装好了左边一个组件，中间一个标题或者组件，右边一个组件的样子，最后return：

这是上面自定义导航栏的样式，还有两个常量用于在不同系统显示不同的高：

接下来只需要调用，并设置想要的属性就行了：

发现状态栏背景和导航栏不一样，接下来改变状态栏背景，使其一致：

创建一个常量，添加状态栏的属性设置，然后加入到propTypes中：

设置一些状态栏的默认值：

在render中加入状态栏：

在调用的地方设置状态栏参数：

全部代码：

到这里呢就已经结束了，希望各位小伙伴能学到一些知识，小编在这里呢整理了web前端的学习资料，想要学习的小伙伴赶紧行动起来吧，关注小编，私信【学习】，即可免费获得哦！