# NativePHP v4 让 Blade 构建原生 iOS 与 Android 界面

NativePHP 现在可以将 Blade 组件渲染为 iOS 上真正的 SwiftUI 视图和 Android 上的 Jetpack Compose 视图，整个过程无需 WebView 或 HTML。NativePHP 将这项技术称为 SuperNative。Simon Hamp 与 Shane Rosenthal 于 7 月 30 日在二人于波士顿主办的 The Vibes 活动上发布了 SuperNative。这场活动共有 100 人参加，举办时间为 Laracon US 闭幕次日。

如果曾在一年前了解过 NativePHP，并将其视为运行在 WebView 中的 Laravel，v4 值得重新审视。WebView 仍然可用，现有应用也可以继续采用这种方式，但构建界面已经有了新的选择。SuperNative 是 v4 的默认方案，截至 4.1 版本仍处于 beta 阶段，因此文档提醒开发者为快速迭代做好准备。

主要亮点：

- 使用 Blade 构建原生 UI。组件集名为 EDGE，即 Element Definition and Generation Engine，它会直接编译为 SwiftUI 和 Jetpack Compose 视图。
- 无需经过网络。PHP 与原生层直接共享内存，因此组件与屏幕之间没有往返请求，也不需要 WebView 桥接。
- 采用类似 Livewire 的组件模型。它支持公共属性、`mount()`、操作方法，以及 `#[Poll]`、`#[Computed]`、`#[Lazy]` 和 `#[Locked]` 等 Attribute（特性）。
- 使用 Pest 测试原生界面。测试可以在进程内挂载组件，并对组件发布的内容执行断言，因此无需模拟器即可在 CI 中运行。
- 四个插件并入核心。Device、Dialog、File 和 System 现在随 `nativephp/mobile` 一同提供，这是该版本唯一的破坏性变更。

## SuperNative 的工作原理

SuperNative 的架构有别于 Skia 或 Impeller 这样的完全自定义渲染器、运行在 PHP 上层或与 PHP 并行的虚拟机、转译器，以及 HTML 到原生界面的转换器。

NativePHP 的架构文档描述了其实现方式：

> 传统 Blade 引擎生成 HTML；NativePHP 构建的专用 Blade 引擎会将真正的 Blade 组件转换为一种简单的二进制表示。

这种表示形式是一个定长字节数组，由原生端的解释器读取，并据此构建 SwiftUI 和 Compose 视图。

SuperNative 界面的启动速度快于 WebView 界面。它无需启动 WebView、解析 bundle，也无需在每次点击时通过桥接层执行序列化。

无障碍功能通常是 WebView 应用的薄弱环节。由于界面由真正的 SwiftUI 和 Compose 视图构成，VoiceOver、TalkBack、动态字体以及平台辅助功能控件无需额外适配即可工作。仅含图标的控件仍需显式设置 `a11y-label`。

## 编写 SuperNative 界面

在 v3 中，一个界面对应一条 Web 路由。Blade、Livewire 或 Inertia 负责生成 HTML，再由 WebView 渲染；EDGE 则使用 Blade 中的声明为界面包裹原生外壳，例如真正的顶部栏、底部导航或悬浮操作按钮。界面本身没有对应的 PHP 类。

在 v4 中，界面本身就是组件。它由一个继承 `NativeComponent` 的 PHP 类和一个 Blade 视图组成。公共属性负责保存状态，公共方法提供视图调用的操作，`#[Poll]` 等 Attribute 用于处理周期性任务。下面这个配送跟踪器会轮询状态变化：

```php
<?php

namespace App\NativeComponents;

use App\Models\Delivery;
use Illuminate\View\View;
use Native\Mobile\Attributes\Locked;
use Native\Mobile\Attributes\Poll;
use Native\Mobile\Edge\NativeComponent;

class DeliveryTracker extends NativeComponent
{
    #[Locked]
    public int $deliveryId;

    public string $status = 'awaiting_pickup';

    public ?string $courier = null;

    public function mount(): void
    {
        $this->syncFromDatabase();
    }

    #[Poll(5000)]
    public function syncFromDatabase(): void
    {
        $delivery = Delivery::findOrFail($this->deliveryId);

        $this->status = $delivery->status;
        $this->courier = $delivery->courier_name;
    }

    public function confirmReceipt(): void
    {
        Delivery::findOrFail($this->deliveryId)->markReceived();

        $this->syncFromDatabase();
    }

    public function render(): View
    {
        return view('native.delivery-tracker');
    }
}
```

路由位于 `routes/mobile.php` 中，并通过 `Route::native` 宏注册。该宏接收组件类，而非控制器。原生外壳来自继承 `NativeLayout` 的自定义布局类，通过 `->layout()` 关联；`Route::nativeGroup` 则可以为多条路由应用同一个布局：

```php
Route::native('/deliveries/{deliveryId}', DeliveryTracker::class)
    ->layout(DeliveryLayout::class)
    ->name('deliveries.show');
```

视图仍然使用 Blade，其中采用的是原生基础元素。解析器会将 Tailwind 类名映射到对应的平台布局：

```blade
<column class="flex-1 p-6 gap-4 bg-theme-background safe-area">
    <text class="text-2xl font-bold text-theme-on-background">
        {{ str($status)->headline() }}
    </text>

    @if ($courier)
        <text class="text-sm text-gray-500">Courier: {{ $courier }}</text>
    @endif

    <pressable @tap="confirmReceipt" class="px-6 py-4 rounded bg-theme-primary items-center">
        <text class="text-theme-on-primary font-semibold">Confirm receipt</text>
    </pressable>
</column>
```

`<column>` 在 iOS 上会成为真正的 SwiftUI 布局，在 Android 上则会成为 Compose `Column`。`@tap` 处理器会直接调用 PHP 类中的方法。v4 还为触摸按下与松开事件新增了 `@pressDown` 和 `@pressUp`，可用于实现按住操作；单次点击则由 `@tap` 处理。

在手机上运行这个界面无需安装 Xcode 或 Android Studio。`php artisan native:jump` 会启动开发服务器并输出二维码。使用 App Store 和 Google Play 上免费的配套应用 Jump 扫描二维码，即可通过 Wi-Fi 在设备上加载应用。原生调用会转发至开发计算机上运行的 PHP，因此相机和生物识别功能与打包应用中的表现一致。当 `NATIVEPHP_START_URL` 指向 `Route::native` 界面时，Jump 会直接渲染原生 UI。这是目前在真实设备上查看 SuperNative 的最快方式。

## 保留现有 WebView

现有 v3 应用可以继续使用原有实现。WebView 现在是放置在原生界面中的一个组件：

```blade
<webview php url="/" fullscreen />
```

将原生路由指向包含该元素的界面，再在 `.env` 中设置 `NATIVEPHP_START_URL=/home`，`routes/web.php` 中的视图便会像之前一样继续渲染。两种方式可以混合使用：在尚未转换的界面中保留 WebView，并在其周围使用原生导航。每个采用 PHP 模式的嵌入式 WebView 都拥有独立的 PHP 运行时，因此不会与原生界面的运行时竞争资源。

v4 只有在 Web 路由实际渲染时才会启动 WebView。

## 使用 Pest 测试原生界面

由于界面是一个负责发布元素树的 PHP 对象，因此无需设备即可进行测试。测试套件提供 `FakeBridge`，用于捕获组件发布的每一棵树和发起的每一次原生调用；测试本身就是普通的 Pest 测试：

```php
use App\NativeComponents\DeliveryTracker;
use Native\Mobile\Testing\Native;

it('confirms receipt of a delivery', function () {
    $delivery = Delivery::factory()->create(['status' => 'out_for_delivery']);

    Native::visit("/deliveries/{$delivery->id}")
        ->assertSee('Out For Delivery')
        ->tap('Confirm receipt')
        ->assertSet('status', 'received');
});
```

`Native::test()` 会直接挂载组件类，`Native::visit()` 会经过已注册的原生路由并解析路由参数，`tap()` 会触发与指定 `ref` 或可见文本匹配的 `pressable`，随后重新渲染。`php artisan native:make-test DeliveryTracker` 可以生成测试文件。开发者还可以使用 `FakeBridge` 宏添加自定义断言，测试插件发起的原生调用。

## 4.1 版本

4.1 版本于 8 月 7 日发布。`#[Locked]` 用于标记双向绑定无法写入的属性（#260）。如果误写 `native:model="deliveryId"`，系统会抛出错误，从而阻止文本输入框改写当前界面上的记录。

`TreeObservers` 可以观察运行时发布的元素树（#259），为会话录制和调试工具提供所需能力。同一版本还提供基于该钩子的 `TreeSpy` 测试工具，使测试既能对中间帧执行断言，也能检查最终状态。

此外还有两项较小的更新：`NativeRouteFallback` 用于设置浏览器访问仅限原生端的路由时看到的内容（#268）；Tailwind 解析器现在会对超出支持范围的类名发出警告（#296）。

## 从 v3 升级

v4 的大部分改动都是新增内容，升级指南说明应用代码无需改动。唯一的破坏性变更来自依赖项。Device、Dialog、File 和 System 现在属于核心组件，而 `nativephp/mobile` 会通过 Composer 声明与这四个独立插件包冲突，因此必须先移除它们，Composer 才能完成依赖解析：

```bash
php artisan native:plugin:uninstall --core-v4
```

该命令会移除全部四个插件，并从 `NativeServiceProvider` 中取消注册。添加 `--force` 可以跳过提示。随后将版本约束升级到 `~4.0.0`，并重新生成原生项目文件：

```bash
composer update
php artisan native:install --force
```

Facade 和事件保持不变，因此现有的 `Dialog::alert()` 调用仍可继续工作。Vite 开发服务器现在改为按需启用：需要使用时，为 `native:watch` 或 `native:run` 传入 `--vite`，并从脚本中移除 `--no-vite` 参数。插件作者应将版本约束扩展为 `^3.0|^4.0`。该软件包还在内置 Boost skills 中提供了一个 v3 到 v4 的升级 skill，开发者也可借助智能体完成升级。

针对 NativePHP 的常见质疑是，原生外壳中的 WebView 算不上原生应用。对于开发者选择转换的界面，v4 已经给出了回应，同时无需学习 Swift 或 Kotlin。组件是 PHP 类，模板使用 Blade，测试则由 Pest 编写。

界面还可以逐个转换。由于 `<webview>` 已成为组件，团队可以优先迁移存在滚动性能或无障碍问题的界面，其余部分继续沿用现有实现。

[原文链接 NativePHP v4 让 Blade 构建原生 iOS 与 Android 界面
](https://catchadmin.com/post/2026-08/NativePHP-v4-Build-Native-iOS-and-Android-UI-in-Blade)


NativePHP 现在可以将 Blade 组件渲染为 iOS 上真正的 SwiftUI 视图和 Android 上的 Jetpack Compose 视图，整个过程无需 WebView 或 HTML。NativePHP 将这项技术称为 SuperNative。Simon Hamp 与 Shane Rosenthal 于 7 月 30 日在二人于波士顿主办的 The Vibes 活动上发布了 SuperNative。这场活动共有 100 人参加，举办时间为 Laracon US 闭幕次日。

NativePHP v4 让 Blade 构建原生 iOS 与 Android 界面

NativePHP 现在可以将 Blade 组件渲染为 iOS 上真正的 SwiftUI 视图和 Android 上的 Jetpack Compose 视图，整个过程无需 WebView 或 HTML。NativePHP 将这项技术称为 SuperNative。Simon Hamp 与 Shane Rosenthal 于 7 月 30 日在二人于波士顿主办的 The Vibes 活动上发布了 Su

人工智能

代码解释

服务器

虚拟机

解释器

智能体

Android

路由

Kotlin

Swift

Xcode

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

NativePHP 现在可以将 Blade 组件渲染为 iOS 上真正的 SwiftUI 视图和 Android 上的 Jetpack Compose 视图，整个过程无需 WebView 或 HTML。NativePHP 将这项技术称为 SuperNative。Simon Hamp 与 Shane Rosenthal ...

NativePHP v4 让 Blade 构建原生 iOS 与 Android 界面-腾讯云开发者社区-腾讯云

NativePHP v4 让 Blade 构建原生 iOS 与 Android 界面

NativePHP v4 让 Blade 构建原生 iOS 与 Android 界面

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐