使用插件 API
在实现屏幕方向功能之前，先构建一个调用插件 API 的用户界面是合理的做法。本质上，我们需要搭建一个测试框架，以便快速测试各平台的功能一致性。
本教程的重点是讲解如何构建 Capacitor 插件，而非如何构建 Ionic Framework 应用，因此您可以直接获取所需文件的完成版本，并将其内容复制粘贴到您的项目中：
复制完成后，使用 ionic serve 命令启动 Capacitor 应用。打开浏览器的开发者工具，您应该会看到以下错误：
未捕获的（promise 中）错误：ScreenOrientation 没有 Web 平台实现。
这个错误符合预期，因为我们尚未为任何平台实现代码。请保持浏览器打开状态，我们将首先实现 Web 平台。在此之前，让我们先回顾一下 Home.tsx 中的相关代码。
插件是如何被使用的？
跟踪屏幕方向：
const [orientation, setOrientation] = useState<string>('');
orientation 状态变量用于存储屏幕方向的值，可通过调用 setOrientation 进行更新。由于代码开始执行时我们不知道当前的屏幕方向，因此默认设置为空字符串。使用字符串类型是为了更容易告知 UI 应显示哪种设计。
建立了一个事件监听器，当触发 screenOrientationChange 事件时更新 orientation。
ScreenOrientation.addListener('screenOrientationChange', res =>
setOrientation(res.type),
);
UI 加载时获取当前屏幕方向，并在 UI 从 DOM 中移除时移除所有已创建的监听器（如上述监听器）。
useEffect(() => {
ScreenOrientation.orientation().then(res => setOrientation(res.type));
return () => {
ScreenOrientation.removeAllListeners();
};
}, []);
请不要过多关注 useEffect 和返回函数；这些是 React 特定的语法规则。
显示正确的设计：
OrientationType 对于竖屏方向有两个值：portrait-primary 和 portrait-secondary。横屏方向也是如此。我们的 UI 不关心它们之间的区别，只关心是横屏还是竖屏。
{
orientation.includes('portrait') &&
{
/* 提供一个按钮，用于旋转并将屏幕方向锁定为横屏模式。 */
};
}
{
orientation.includes('landscape') &&
{
/* 让用户通过确认按钮“签名”并解锁屏幕方向。 */
};
}
锁定和解锁屏幕方向：
竖屏设计包含一个按钮，按下时将改变屏幕方向并锁定。
onClick={() => ScreenOrientation.lock({ orientation: "landscape-primary" })}
相反，横屏设计包含一个按钮，按下时将解锁屏幕方向。
onClick={() => ScreenOrientation.unlock()}
Home.tsx 和 Home.css 中的其余代码纯粹是装饰性的；我们无需深入探讨。运行 npm run build，以便在 iOS 或 Android 上运行应用时使用新的 UI。
现在我们有了一个调用插件 API 的用户界面，让我们开始实现功能吧！下一步我们将首先针对 Web 平台：Web 实现。