React Native macOS 菜单栏应用是不是可行？

Posted 2023-02-22

【中文标题】React Native macOS 菜单栏应用是不是可行？

【英文标题】：Are React Native macOS menu bar apps possible?React Native macOS 菜单栏应用是否可行？

【发布时间】：2017-10-05 02:13:18

【问题描述】：

目前有什么方法可以在 macOS 菜单栏中创建一个在后台运行的 React Native 应用程序？

【问题讨论】：

适用于 macOS 的 React Native 应用程序？ React Native 应用仅面向 ios 和 android 移动平台。

有一个库允许在 macOS 上进行 react-native 开发 github.com/ptmt/react-native-macos

【参考方案1】：

这个问题不是最近的，但我在搜索这个主题时发现它并且最近有一个相关的更新：随着微软的新桌面工作，这现在是可行的，虽然仍然很棘手。

感谢ospfranco 的出色工作。

---

唯一的方法是编辑您的AppDelegate 类并使用来自 React Native 应用程序的根视图内容初始化状态按钮标签及其弹出内容。也可以自定义它的大小、外观和栏上的按钮，但只能在 Swift 代码中。

func applicationDidFinishLaunching(_ aNotification: Notification) 
    let jsCodeLocation: URL

    jsCodeLocation = RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index", fallbackResource:nil)
    let rootView = RCTRootView(bundleURL: jsCodeLocation, moduleName: "tempomat", initialProperties: nil, launchOptions: nil)
    let rootViewController = NSViewController()
    rootViewController.view = rootView

    popover = NSPopover()

    popover.contentSize = NSSize(width: 700, height: 800)
    popover.animates = true
    popover.behavior = .transient
    popover.contentViewController = rootViewController

    statusBarItem = NSStatusBar.system.statusItem(withLength: CGFloat(60))

    if let button = self.statusBarItem.button 
        button.action = #selector(togglePopover(_:))
      button.title = "Tempomat"
    

  

参考资料：

React Native MacOS（微软）：https://github.com/microsoft/react-native-macos

示例代码：https://github.com/ospfranco/react-native-macos-menubar-template

博文：https://ospfranco.github.io/post/2020/05/23/how-to-make-a-react-native-menu-bar-app-for-mac-os/

【参考方案2】：

到目前为止，最好的方法是使用 Electron 平台。

【讨论】：

“最佳”。不，实际上最好是使用平台工具包而不是 javascript 为您要运行的平台编写代码。

@LeoNatan 这不是问题的答案，只是您的个人意见，对主题没有任何补充。

@RIK 还好我没有将其作为答案发布，而是作为评论发布。

@LeoNatan Fair dinkum

有一种新的方式使用 Microsoft 桌面工作而不是 React Native，我创建了一个包含更多细节的新答案。该平台仍未正式支持，但通过一个简单的 Swift 类，可以将 React Native Root View 注入 NSPopover 并通过 JS “本地”实现 UI。