LiveViewNative

客户端规格 {: .info}

format: :swiftui
module_suffix: "SwiftUI"
template_sigil: ~LVN
component: LiveViewNative.SwiftUI.Component
targets: ~w{ios ipados macos maccatalyst watchos tvos visionos unknown}

LiveViewNative Swift 包允许你使用 Phoenix LiveView 构建原生 iOS 应用，配合 SwiftUI。

安装

你可以通过在 Elixir 中运行生成器来安装客户端，或者手动将其添加到现有的 Xcode 项目中。

两种方法都需要

1. 在 mix.exs 中添加 {:live_view_native_swiftui, "~> 0.3.0-rc.4"}
2. 在 config.exs 中的 config :live_view_native 的 plugins: 列表中添加 LiveViewNative.SwiftUI

<!-- tabs-open -->

生成项目

1. 运行 mix help lvn.swiftui.gen 查看生成器可用的选项
2. 运行 mix lvn.gen --no-copy 打印配置设置，以在你的应用中支持 SwiftUI
3. 运行 mix lvn.swiftui.gen 确保获得正确生成的文件。请注意，这可能会覆盖现有的 Xcode 项目

添加到现有 Xcode 项目

1. 运行 mix lvn.swiftui.gen --no-xcodegen
2. 在 Xcode 中转到 Package Dependencies
3. 选择 File → Add Packages...
4. 输入包 URL https://github.com/liveview-native/liveview-client-swiftui
5. 选择 Add Package

<!-- tabs-close -->

安装后

安装完成后，你需要为 LiveView Native SwiftUI 启用现有的 LiveView。

1. 运行 mix lvn.gen.live swiftui <ContextModule>
2. 在 LiveView 模块中添加 use <NativeModule>, :live_view

示例

> mix lvn.gen.live swiftui Home
* creating lib/my_demo_web/live/home_live.swiftui.ex
* creating lib/my_demo_web/live/swiftui/home_live.swiftui.neex

defmodule MyDemoWeb.HomeLive do
  use MyDemoWeb, :live_view
  use MyDemoNative, :live_view
end

最后，如果你通过 Mix 任务生成了 Xcode 项目，你可以在 native/swiftui 中打开 MyDemoWeb.xcodeproj 文件。

使用

此插件提供了 Phoenix LiveView 的 SwiftUI 渲染行为。首先将此插件添加到 LiveView 中。我们使用 LiveViewNative.LiveView 来实现：

defmodule MyAppWeb.HomeLive do
  use MyAppWeb :live_view
  use LiveViewNative.LiveView,
    formats: [:swiftui],
    layouts: [
      swiftui: {MyAppWeb.Layouts.SwiftUI, :app}
    ]

end

然后，就像所有格式的 LiveView Native 渲染组件一样，你将在调用模块下创建一个新模块，并附加 module_suffix：

defmodule MyAppWeb.HomeLive.SwiftUI do
  use LiveViewNative.Component,
    format: :swiftui

  def render(assigns, _interface) do
    ~LVN"""
    <Text>Hello, SwiftUI!</Text>
    """
  end
end

有关其他选项的详细信息以及模板渲染与使用 render/2 的解释，请参阅 LiveView Native 文档。

可以使用 ExDoc 生成文档 并发布在 HexDocs 上。发布后，可以在 https://hexdocs.pm/live_view_native_swiftui 找到文档。