React Native里的Header包教包会

1、背景：

Header一般由状态栏+标题栏组成，但是ios和android和表现形式不尽相同：


上图为非沉浸式，下图为沉浸式。
如果不做任何处理，我们在RN中写一个组件放在App.tsx中，android和ios的效果为：

import React from 'react';
import {View, Text} from 'react-native';

const App = () => {
  return (
    <>
      <View style={{height: 44, backgroundColor: 'red'}}>
        <Text>{'测试文案测试文案测试文案'}</Text>
      </View>
    </>
  );
};

export default App;

表明：android是有默认状态栏的，所书写组件会在状态栏下方放置；ios则从手机屏幕顶部开始放置

2、StatusBar

React Native提供的控制应用状态栏的组件。
有如下API比较常用：

Android和iOS都适用的：

• barStyle：设置状态栏文本的颜色。取值为：

enum('default', 'light-content', 'dark-content')

dark-content:
light-content:

default: 默认

• hidden:收否隐藏

只对Android生效：

• backgroundColor：背景颜色

const App = () => {
  return (
    <>
      <StatusBar barStyle={'light-content'} backgroundColor={'blue'}/>
      <View style={{height: 44, backgroundColor: 'red'}}>
        <Text>{'测试文案测试文案测试文案'}</Text>
      </View>
    </>
  );
};

• translucent：是否沉浸式, 页面从手机屏幕顶部开始绘制

const App = () => {
  return (
    <>
      <StatusBar barStyle={'light-content'} backgroundColor={'transparent'} translucent={true}/>
      <View style={{height: 44, backgroundColor: 'red'}}>
        <Text>{'测试文案测试文案测试文案'}</Text>
      </View>
    </>
  );
};

注意，此时 android和ios的效果相同了。

只对iOS生效的：

• networkActivityIndicatorVisible：指定是否显示网络活动提示符
• showHideTransition：通过hidden属性来显示或隐藏状态栏时所使用的动画效果。默认值为’fade’

3、SafeAreaView（iOS组件）

SafeAreaView的目的是在一个“安全”的可视区域内渲染内容。具体来说就是因为目前有 iPhone X 这样的带有“刘海”的全面屏设备，所以需要避免内容渲染到不可见的“刘海”范围内。本组件目前仅支持 iOS 设备以及 iOS 11 或更高版本。
SafeAreaView会自动根据系统的各种导航栏、工具栏等预留出空间来渲染内部内容。更重要的是，它还会考虑到设备屏幕的局限，比如屏幕四周的圆角或是顶部中间不可显示的“刘海”区域。

onst App = () => {
  return (
    <>
      <StatusBar barStyle={'dark-content'} />
      <SafeAreaView>
        <View style={{height: 44, backgroundColor: 'red'}}>
          <Text>{'测试文案测试文案测试文案'}</Text>
        </View>
      </SafeAreaView>
    </>
  );
};

使用SafeAreaView可以避免我们判断iOS设备的状态栏高度

export const X_WIDTH = 375;
export const X_HEIGHT = 812;

export const X12_WIDTH = 390;
export const X12_HEIGHT = 844;

export const XSMAX_WIDTH = 414;
export const XSMAX_HEIGHT = 896;

export const PRO_MAX_12_WIDTH = 428;
export const PRO_MAX_12_HEIGHT = 926;

export const isIPhoneX = () =>
  Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS
    ? (width === X_WIDTH && height === X_HEIGHT) ||
      (width === XSMAX_WIDTH && height === XSMAX_HEIGHT) ||
      (width === X12_WIDTH && height === X12_HEIGHT) ||
      (width === PRO_MAX_12_WIDTH && height === PRO_MAX_12_HEIGHT)
    : false;

export const StatusBarHeight = Platform.select({
  ios: isIPhoneX() ? 44 : 20,
  android: StatusBar.currentHeight,
  default: 0,
});

4、非沉浸式方案：

上述代码即可满足

5、沉浸式方案：

const App = () => {
  return (
    <>
      <StatusBar
        barStyle={'dark-content'}
        translucent={true}
        backgroundColor={'transparent'}
      />
      <View style={{backgroundColor: 'red'}}>
        <SafeAreaView>
          <View
            style={{
              height: 44,
              backgroundColor: 'red',
              justifyContent: 'center',
              marginTop: StatusBar.currentHeight,
            }}>
            <Text>{'测试文案测试文案测试文案'}</Text>
          </View>
        </SafeAreaView>
      </View>
    </>
  );
};

github: https://github.com/hanren726/ReactNativeDemoProject/blob/main/MyApp/demo/Header/Header.tsx

欢迎star 🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟