React Native实现自定义顶部导航栏

原创

已于 2022-04-30 16:31:56 修改 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #react native #react

于 2022-04-22 22:20:57 首次发布

效果

在这里插入图片描述

import React, {
   
   Component} from 'react';
import {
   
   
  Platform,
  StatusBar,
  StyleSheet,
  Text,
  View,
  ViewPropTypes,
} from 'react-native';
import PropTypes from 'prop-types';
import DeviceInfo from 'react-native-device-info';

const NAV_BAR_HEIGHT_IOS = 44; //导航栏在iOS中的高度
const NAV_BAR_HEIGHT_ANDROID = 50; //导航栏在Android中的高度
const NAV_BAR_HEIGHT =
  Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID;
const STATUS_BAR_HEIGHT =
  Platform.OS !== 'ios' || DeviceInfo.isIPhoneX_deprecated ? 0 : 20; //状态栏的高度
const StatusBarShape = {
   
   
  //设置状态栏所接受的属性
  barStyle: PropTypes.oneOf(['light-content', 'default']),
  hidden: PropTypes.bool,
  back