NativePHP v4：在 Blade 中构建原生 iOS 和 Android UI

NativePHP 现在可以将 Blade 组件渲染成 iOS 上的 SwiftUI 视图和 Android 上的 Jetpack Compose 视图，无需任何 Web 视图或 HTML。NativePHP 将此功能称为 SuperNative。 西蒙·汉普 和 肖恩·罗森塔尔 于 氛围 7 月 30 日，也就是 Laracon US 闭幕的第二天，他们在波士顿举办了一场 100 人参加的活动。

如果你一年前看过 NativePHP 并认为它不过是 Laravel 的 Web 视图版本，那么 v4 版本值得你重新审视。Web 视图仍然可用，你也不必放弃它，但它不再是构建页面的唯一方式。SuperNative 是 v4 版本的默认选项。

亮点：

• Blade原生UI。 该组件集名为 EDGE，是 Element Definition and Generation Engine（元素定义和生成引擎）的缩写，它编译成 SwiftUI 和 Jetpack Compose 视图，而不是 HTML。
• 无需网络跳转。 PHP 和原生层直接共享内存，因此组件和屏幕之间没有往返和 Web 视图桥接。
• 类似 Livewire 的组件。 公共财产， mount() 、操作方法和属性，包括 #[Poll] , #[Computed] , #[Lazy] ， 和 #[Locked] 。
• 适用于原生屏幕的 PEST 测试套件。 测试会在进程内挂载组件并断言其发布的内容，因此它们无需模拟器即可在 CI 中运行。
• 四个插件已集成到核心中。 Device , Dialog , File ， 和 System 现在随附发货 nativephp/mobile 这是此次版本发布中唯一的重大变更。

# SuperNative 的工作原理

SuperNative 不是像 Skia 或 Impeller 那样的完全自定义渲染器，也不是运行在 PHP 之上或与之相邻的另一个虚拟机。它也不是转译器或 HTML 到原生代码的转换器。

来自 NativePHP 的 架构文档 :

我们构建了自己的 Blade 引擎，可以将真正的 Blade 组件转换为简单的二进制表示，而不是 HTML。

该表示形式为固定长度的字节数组，原生端的解释器读取该数组并构建 SwiftUI 和 Compose 视图。

SuperNative 屏幕的启动速度比 Web 视图屏幕更快。它无需启动 Web 视图，无需解析包，也无需在每次点击时通过桥接进行序列化。

辅助功能通常是网页视图应用的薄弱环节。由于这些是真正的 SwiftUI 和 Compose 视图，因此 VoiceOver、TalkBack、动态文本以及平台的辅助控件默认都能正常工作。仅图标控件仍需显式配置。 a11y-label 。

# 编写一个超级原生屏幕

在 v3 版本中，屏幕就是一个 Web 路由。你可以使用 Blade、Livewire 或 Inertia 编写代码；它会在 Web 视图中渲染成 HTML，然后 Edge 浏览器会将其封装成原生 Chrome 组件：例如 Blade 中声明的顶部栏、底部导航栏或浮动操作按钮。屏幕本身并没有对应的 PHP 类。

在 v4 版本中，屏幕组件本身就是一个组件。它是一个继承自某个类的 PHP 类。 NativeComponent 以及一个 Blade 视图。公共属性保存状态，公共方法是视图调用的操作，属性则类似于…… #[Poll] 处理重复性工作。此交付跟踪器会轮询状态变更：

命名空间

应用程序\原生组件
;
使用

应用程序\模型\交付
;
使用

照亮\视图\视图
;
使用

Native\Mobile\Attributes\Locked
;
使用

Native\Mobile\Attributes\Poll
;
使用

原生\移动\Edge\原生组件
;
班级

配送追踪器

延伸

NativeComponent
{
#[
已锁定
]

民众

整数
配送 ID；

民众

细绳
$status
=

'等待取货'
;

民众

？细绳
快递员
=

无效的
;

民众

功能

山
（）
:

空白
{

$this
->
同步数据库
（）；
}
#[
轮询
（
5000
）]

民众

功能

同步数据库
（）
:

空白
{
送货
=

送货
::
查找或失败
（
$this
->
deliveryId);

$this
->
地位
=
送货
->
地位;

$this
->
导游
=
送货
->
快递员姓名；
}

民众

功能

确认收据
（）
:

空白
{

送货
::
查找或失败
（
$this
->
配送ID)
->
已收到标记
（）；

$this
->
同步数据库
（）；
}

民众

功能

使成为
（）
:

看法
{

返回

看法
（
'native.delivery-tracker'
（英文）：
}
}

路线存在于 routes/mobile.php 已注册 Route::native 这是一个接受组件类而不是控制器的宏。原生 Chrome 布局来自你通过扩展类而编写的布局类。 NativeLayout 附有 ->layout() ， 和 Route::nativeGroup 将一个布局应用于多个路由：

路线
::
本国的
（
'/deliveries/{deliveryId}'
,
配送追踪器
：：班级
）

->
布局
（
配送布局
：：班级
）

->
姓名
（
'deliveries.show'
（英文）：

视图是 Blade 框架，但元素是原生基本元素而不是 HTML 标签，并且使用 Tailwind 类进行样式设置，解析器会将这些类映射到平台布局上：

<
柱子

班级
=
"flex-1 p-6 gap-4 bg-theme-background safe-area"
>
<
文本

班级
=
"text-2xl font-bold text-theme-on-background"
>

{{

字符串
（状态）
->
标题
（）
}}
</
文本
>

@如果
（快递员）
<
文本

班级
=
"text-sm text-gray-500"
快递员：
{{
快递员
}}
</
文本
>

@endif
<
可按压

@轻敲
="确认收据"

班级
=
"px-6 py-4 rounded bg-theme-primary items-center"
>
<
文本

班级
=
"text-theme-on-primary font-semibold"
>确认收据</
文本
>
</
可按压
>
</
柱子
>

<column> 在 iOS 上变成真正的 SwiftUI 布局，并且是一个 Compose Column 在安卓系统上。 @tap 处理程序直接调用 PHP 类中的方法。v4 还新增了 @pressDown 和 @pressUp 用于触摸和抬起事件，这是您实现按住操作而不是单击操作所需要的。

在手机上运行该屏幕不需要 Xcode 或 Android Studio。 php artisan native:jump 启动开发服务器并打印二维码，然后用以下方式扫描它 跳 这款可在 App Store 和 Google Play 下载的免费配套应用，会通过 Wi-Fi 将您的应用加载到设备上。原生调用会被转发回您机器上运行的 PHP 程序，因此摄像头和生物识别功能会像在打包版本中一样正常工作。 NATIVEPHP_START_URL 指向 Route::native 屏幕上，Jump 渲染的是原生 UI 而不是 Web 视图，因此它是在真实硬件上查看 SuperNative 的最快方式。

# 保持您的网站浏览量

现有的 v3 应用无需重写。现在，Web 视图是一个组件，可以放置在原生屏幕中，而不是整个应用中：

<
网页视图

php

网址
=
“/”

全屏
/>

将原生路由指向包含该元素的屏幕，设置 NATIVEPHP_START_URL=/home 在你的 .env 以及你的 routes/web.php 视图继续像以前一样渲染。你可以混合使用这两种方式：对于尚未转换的屏幕，可以使用 Web 视图周围的原生导航。每个嵌入式视图都会继续渲染。 php -mode web view 拥有自己专用的 PHP 运行时，因此它永远不会与原生屏幕的运行时发生冲突。

v4 版本也不再像以前那样，只有在实际渲染了 Web 路由之后才会启动 Web 视图。

# 在 PEST 中测试原生屏幕

因为屏幕是一个发布树状结构的 PHP 对象，所以无需设备即可对其进行测试。该测试套件为您提供了一个 FakeBridge 它会捕获组件发布的每一棵树以及它发出的每一次本地调用，并且测试是纯粹的 Pest 测试：

使用

App\NativeComponents\DeliveryTracker
;
使用

原生\移动\测试\原生
;
它
（
确认收到货物
,
功能
（）{
送货
=

送货
::
工厂
（）
->
创造
（[
'地位'

=>

'out_for_delivery'
]);

本国的
::
访问
（
"/deliveries/{
送货
->
ID
}”
）

->
断言
（
“正在派送中”
）

->
轻敲
（
“确认收据”
）

->
断言集
（
'地位'
,
'已收到'
（英文）：
});

Native::test() 直接挂载组件类， Native::visit() 它会遍历你注册的本地路由并解析路由参数，并且 tap() 在重新渲染之前，按下与给定引用或可见文本匹配的可按压对象。 php artisan native:make-test DeliveryTracker 它会生成文件脚手架。您可以使用以下方式添加自己的断言： FakeBridge 用于测试插件原生调用的宏。

# 版本 4.1

4.1 版本于 8 月 7 日发布。 #[Locked] 标记双向绑定无法写入的属性（ #260 ）。A native:model="deliveryId" 拼写错误会抛出异常，而不是让文本输入重写屏幕上的记录。

TreeObservers 允许您监视运行时发布的元素树（ #259 ），这正是会话录制和调试工具所需要的。同一版本还包含一个 TreeSpy 基于该钩子构建的测试实用程序，使得测试可以断言中间帧，而不仅仅是最终状态。

新增两项较小的内容： NativeRouteFallback 设置浏览器访问仅限原生应用的路由时所看到的内容（ #268 ），Tailwind 解析器现在会警告它不支持的类（ #296 而不是忽视它们。

# 从 v3 升级

v4 版本的大部分更新都是新增的，升级指南指出无需更改应用程序代码。唯一的重大变更在于依赖项。 Device , Dialog , File ， 和 System 现在都是核心组成部分，而且 nativephp/mobile Composer 声明与四个独立插件包冲突，因此在删除这些插件包之前，Composer 将无法解决冲突：

php

工匠

native:plugin:卸载

--core-v4

这样会移除所有四个并将其从您的系统中注销。 NativeServiceProvider 。 添加 --force 跳过提示。然后将约束条件提高到 ~4.0.0 并重新构建原生项目文件：

作曲家

更新
php

工匠

本地安装

- 力量

外观和事件保持不变，因此您现有的 Dialog::alert() 通话功能仍然正常。Vite 开发服务器现在需要选择加入：通过 --vite 到 native:watch 或者 native:run 如果你想要的话，就把它放下。 --no-vite 来自脚本的标志。插件作者应该扩大其限制范围。 ^3.0|^4.0 该软件包还包含一个从v3升级到v4的技能。 促进 如果您希望由代理人为您进行升级，则需要具备相关技能。

通常对 NativePHP 的反对意见是，原生框架中的 Web 视图并非原生应用。对于您选择转换的屏幕，v4 版本解决了这个问题，而且无需您学习 Swift 或 Kotlin。您的组件是一个 PHP 类，您的模板是 Blade 模板，您的测试是 Pest 测试。

您也可以一次转换一个屏幕。因为 <webview> 如果这是一个组件而不是整个应用程序，团队可以移动屏幕以解决滚动性能或可访问性问题，而将其余部分保持不变。

这 完整更新日志 EDGE 组件参考位于 GitHub 并且 v4 文档 。