ReactNative如何实现沉浸式状态栏及渐变色Header【兼容Android和iOS】

沉浸式状态栏

需要用到react-native提供的StatusBar组件

import {StatusBar} from 'react-native';

<StatusBar barStyle={'dark-content'} backgroundColor={'transparent'} translucent={true}></StatusBar>
1
2
3

如果用到Navigation，需要设置如下属性

navigation.setOptions({
  headerTransparent: true
});
1
2
3

渐变色Header

import { LinearGradient } from 'react-native-linear-gradient';

// 使用Gradient组件作为Header
<LinearGradient
  colors={['#4c669f', '#3b5998', '#192f6a']} // 渐变颜色数组
  start={{ x: 0, y: 0 }} end={{ x: 0, y: 1 }} // 渐变方向
  style={{ height: 200 }} // Header的高度
>
  {/* Header内容 */}
</LinearGradient>
1
2
3
4
5
6
7
8
9
10

具体页面实现还需要考虑项目中实际情况，这里只是提供了核心内容。