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

Lik10242024-07-08 9:57

沉浸式状态栏

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

ts 复制代码

import {StatusBar} from 'react-native';

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

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

js 复制代码

navigation.setOptions({
  headerTransparent: true
});

ts 复制代码

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>

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