如何在React Native中使用Apple Screen Time API实现应用管控

由于Apple的Screen Time API目前没有官方的React Native封装库，你需要通过原生桥接来实现需求，以下是具体步骤：

1. 配置Xcode权限 #

首先在Xcode中开启Screen Time权限：

• 打开你的RN项目的iOS工程（ios/[项目名].xcworkspace）
• 选中项目根节点，进入Signing & Capabilities标签页
• 点击+ Capability，搜索并添加Screen Time权限

2. 编写iOS原生桥接模块（Swift） #

创建一个RN原生模块来封装Screen Time的核心功能：

2.1 创建Swift文件 #

在iOS工程中新建ScreenTimeManager.swift，内容如下：

import UIKit
import ScreenTime
import React

@objc(ScreenTimeManager)
class ScreenTimeManager: RCTEventEmitter {
  private var focusSession: STFocusSession?
  
  // 注册模块，RN端可通过NativeModules.ScreenTimeManager调用
  override static func requiresMainQueueSetup() -> Bool {
    return true
  }
  
  // 请求Screen Time授权
  @objc func requestAuthorization(_ resolve: RCTPromiseResolveBlock, rejecter reject: RCTPromiseRejectBlock) {
    STStorageAuthorizationController.requestAuthorization { status in
      switch status {
      case .authorized:
        resolve(true)
      case .denied, .restricted, .notDetermined:
        reject("AUTH_ERROR", "Screen Time authorization failed", nil)
      @unknown default:
        reject("AUTH_ERROR", "Unknown authorization status", nil)
      }
    }
  }
  
  // 启用App管控：当当前App前台时，限制其他所有App访问
  @objc func enableAppRestrictions() {
    // 创建专注会话，设置仅允许当前App运行
    let allowedBundleIDs = [Bundle.main.bundleIdentifier!]
    let configuration = STFocusSessionConfiguration(allowedBundleIdentifiers: allowedBundleIDs)
    focusSession = STFocusSession(configuration: configuration)
    focusSession?.start()
  }
  
  // 禁用App管控
  @objc func disableAppRestrictions() {
    focusSession?.stop()
    focusSession = nil
  }
  
  // 监听App前后台状态，自动触发管控
  @objc func setupAppStateListener() {
    NotificationCenter.default.addObserver(self, selector: #selector(appDidBecomeActive), name: UIApplication.didBecomeActiveNotification, object: nil)
    NotificationCenter.default.addObserver(self, selector: #selector(appWillResignActive), name: UIApplication.willResignActiveNotification, object: nil)
  }
  
  @objc private func appDidBecomeActive() {
    enableAppRestrictions()
  }
  
  @objc private func appWillResignActive() {
    disableAppRestrictions()
  }
  
  // 清理监听
  deinit {
    NotificationCenter.default.removeObserver(self)
  }
}

2.2 配置桥接头文件 #

在iOS工程的[项目名]-Bridging-Header.h中添加：

#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>

2.3 注册模块 #

在AppDelegate.m中导入模块并注册：

#import "ScreenTimeManager.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // ... 其他代码
  [bridge.moduleClasses addObject:[ScreenTimeManager class]];
  return YES;
}

@end

3. React Native端调用 #

在RN代码中引入原生模块，并结合AppState监听实现自动管控：

import { NativeModules, AppState } from 'react-native';

const { ScreenTimeManager } = NativeModules;

// 在App初始化时请求权限并设置监听
const setupScreenTimeControls = async () => {
  try {
    await ScreenTimeManager.requestAuthorization();
    ScreenTimeManager.setupAppStateListener();
  } catch (err) {
    console.error('Screen Time授权失败:', err);
  }
};

// 在App组件中调用
useEffect(() => {
  setupScreenTimeControls();
}, []);

关键注意事项 #

• 系统版本要求：Screen Time API仅支持iOS 13及以上版本，需在RN中做版本判断
• 审核风险：Apple对Screen Time的使用有严格限制，需确保你的管控场景符合合规要求（如家长控制、专注辅助等），避免被拒审
• 真机测试：Screen Time API在模拟器上可能无法正常工作，需使用真机测试
• 权限说明：需在Info.plist中添加权限描述，说明使用Screen Time的目的，例如：

  <key>NSScreenTimeUsageDescription</key>
  <string>需要访问Screen Time权限以帮助您专注于当前应用</string>
  

内容的提问来源于stack exchange，提问作者Kaan Genis