如何使用React Native创建设备通知页固定通知栏？

一、APP内部的固定顶部通知栏 #

这种是在APP界面内始终固定在顶部的通知栏，用React Native基础组件就能实现，核心是通过样式固定位置：

实现代码示例 #

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

const FixedNotificationBar = () => {
  return (
    <SafeAreaView style={styles.container}>
      {/* 固定通知栏 */}
      <View style={styles.notificationBar}>
        <Text style={styles.notificationText}>这是APP内固定通知栏</Text>
      </View>
      {/* 页面主体内容 */}
      <View style={styles.content}>
        <Text>页面主体内容</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  notificationBar: {
    position: 'absolute', // RN 0.68+也可用'fixed'
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: '#2196F3',
    paddingVertical: 12,
    paddingHorizontal: 16,
    zIndex: 1000, // 确保在其他内容上方显示
  },
  notificationText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '500',
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 50, // 给顶部通知栏留出空间
  },
});

export default FixedNotificationBar;

注意点 #

• 用position: 'absolute'或fixed固定位置，zIndex避免被其他内容遮挡
• 如果适配刘海屏，可结合SafeAreaView调整顶部位置，避免通知栏被刘海挡住

二、系统通知页面的常驻固定通知栏（如图所示） #

这种是显示在设备系统通知中心的常驻通知，Android端主要靠前台服务实现（系统要求前台服务必须显示通知，且通知不会被自动清除），iOS端限制较多，仅特定类型APP可实现：

Android端实现步骤 #

1. 安装第三方库
   推荐用react-native-push-notification，先安装依赖：

npm install react-native-push-notification --save
# 或 yarn add react-native-push-notification

按照库文档完成Android端配置，比如在AndroidManifest.xml中添加权限和服务声明。

2. 创建常驻通知

import PushNotification from 'react-native-push-notification';

// 初始化通知配置
PushNotification.configure({
  onRegister: token => console.log('TOKEN:', token),
  onNotification: notification => console.log('NOTIFICATION:', notification),
  permissions: { alert: true, badge: true, sound: true },
  popInitialNotification: true,
  requestPermissions: true,
});

// 提前创建Android通知渠道（8.0+必填）
PushNotification.createChannel(
  {
    channelId: 'permanent-noti-channel', // 自定义渠道ID
    channelName: '常驻通知渠道',
    channelDescription: '用于显示常驻通知',
    importance: 4,
    vibrate: true,
  },
  created => console.log('通知渠道创建状态:', created),
);

// 创建常驻前台通知
const createPermanentSystemNotification = () => {
  PushNotification.localNotification({
    // Android专属配置
    channelId: 'permanent-noti-channel',
    autoCancel: false, // 禁止用户手动取消
    ongoing: true, // 标记为常驻通知
    priority: 'high',
    visibility: 'public',

    // 通用配置
    title: '常驻通知标题',
    message: '这是系统通知中心的固定通知',
    playSound: false,
  });

  // 启动前台服务，确保通知持续存在
  PushNotification.startForegroundService({
    channelId: 'permanent-noti-channel',
    title: '服务运行中',
    message: '通知将持续显示',
  });
};

关键说明 #

• ongoing: true：设置后通知无法被用户手动清除，实现常驻效果
• 前台服务：Android要求前台服务必须绑定通知，只要服务不停止，通知就会一直显示
• 通知渠道：Android 8.0+必须创建，否则通知无法正常显示

iOS端注意事项 #

iOS对常驻通知限制严格，仅导航、音乐等特定品类APP可申请持久化通知权限，需借助UNNotificationServiceExtension或后台模式实现，具体需参考Apple官方开发文档。

内容的提问来源于stack exchange，提问作者Mehmet Erdoğan