You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Expo模块中集成SwiftUI的FamilyActivityPicker

问题:在Expo模块中实现FamilyActivityPicker功能

我正尝试在React Native应用中通过Expo模块,使用Swift实现FamilyActivityPicker功能,以便让用户选择可通过监控进行限制的应用。

苹果官方示例代码

struct FamilyActivityPickerView: View {
  @State var selection = FamilyActivitySelection()
  @State var isPresented = false

   var body: some View {
       Button("Present FamilyActivityPicker") { isPresented = true }
       .familyActivityPicker(isPresented: $isPresented,
                             selection: $selection)
       .onChange(of: selection) { newSelection in
           let applications = selection.applications
           let categories = selection.categories
           let webDomains = selection.webDomains
       }
   }
}

我的Expo模块代码

import ExpoModulesCore
import DeviceActivity
import FamilyControls
import SwiftUI

public class ScreentimeModule: Module {
  // Each module class must implement the definition function. The definition consists of components
  // that describes the module's functionality and behavior.
  // See https://docs.expo.dev/modules/module-api for more details about available components.
  public let center = DeviceActivityCenter()
  
  public func definition() -> ModuleDefinition {
    
    // Sets the name of the module that JavaScript code will use to refer to the module. Takes a string as an argument.
    // Can be inferred from module's class name, but it's recommended to set it explicitly for clarity.
    // The module will be accessible from `requireNativeModule('Screentime')` in JavaScript.
    Name("Screentime")

    // Sets constant properties on the module. Can take a dictionary or a closure that returns a dictionary.
    Constants([
      "PI": Double.pi
    ])

    // Defines event names that the module can send to JavaScript.
    Events("onChange")

    AsyncFunction("authFamilyControls") {
      let center = AuthorizationCenter.shared
      do {
        try await center.requestAuthorization(for: .individual)
      } catch {
        print("error")
      }
    }    

    Function("startMonitor") {
      let schedule = DeviceActivitySchedule(
        intervalStart: DateComponents(hour: 0, minute:0), 
        intervalEnd: DateComponents(hour:23,minute:59), 
        repeats: true
        )
      
      try center.startMonitoring(.daily, during: schedule)
    }

    // Defines a JavaScript function that always returns a Promise and whose native code
    // is by default dispatched on the different thread than the JavaScript runtime runs on.
    AsyncFunction("setValueAsync") { (value: String) in
      // Send an event to JavaScript.
      self.sendEvent("onChange", [
        "value": value
      ])
    }
    

    // Enables the module to be used as a native view. Definition components that are accepted as part of the
    // view definition: Prop, Events.
    View(ScreentimeView.self) {
      // Defines a setter for the `name` prop.
      Prop("name") { (view: ScreentimeView, prop: String) in
        print(prop)
      }
    }
  }
}

extension DeviceActivityName {
  static let daily = Self("daily")
}

遇到的问题

我曾尝试将FamilyActivityPicker用函数包裹,但由于它是View类型,这种方式无法生效。不过我已成功在另一个函数中实现了requestAuthorization功能(它也是一种视图相关操作),现在不清楚如何在模块的View部分实现FamilyActivityPicker。

内容的提问来源于stack exchange,提问作者aluxf

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.11 17:23:10