Ionic React Hooks

例子

Hooks的牛逼之处，在于从访问Capacitor APIs和设置清楚减轻器的复杂细节中，抽象出来。 例如，跟踪一个实时的位置信息，我们只需要调用一个hook组件即可

import { useWatchPosition } from '@ionic/react-hooks/geolocation';

const { currentPosition, startWatch, clearWatch } = useWatchPosition();

currentPosition将能够被我们的组件访问。这个hook的返回类型跟随Capacitor的Geolocation API,而不需要关心其他的事件和处理。

添加 Ionic React Hooks 到已经存在的 Ionic React项目

ionic integrations enable capacitor

下一步，安装Ionic React Hooks和PWA Elements

npm i @ionic/pwa-elements @ionic/react-hooks

Ionic React Hooks 教程

让我们来编译一个简单的照相app来拍照并显示在用户的设备上。他将可以运行在网页和app上，而无需修改代码，感谢Capacitor.

我们从通过CLI创建一个新的Ionic React应用程序

ionic start my-react-app blank --type react

开启Capacitor能力

ionic integrations enable capacitor

通过下面的命令安装Ionic React Hooks和Ionic PWA Elements

npm i @ionic/pwa-elements @ionic/react-hooks

现在我们创建了一个项目，并且安装了所有需要的依赖。用编辑器打开项目。

在index.tsx中， 我们需要注册 PWA Elements 库。导入 defineCustomElements 并且在下面调用该方法：

import { defineCustomElements } from '@ionic/pwa-elements/loader';

ReactDOM.render(<App />, document.getElementById('root'));

defineCustomElements(window);

下一步 打开 Home.txs，在imports之后 添加下面的代码:

import { useCamera, availableFeatures } from '@ionic/react-hooks/camera';

您可以通过从特定钩子的特定路径导入钩子来导入它们。

每个插件也有一个availableFeatures对象。虽然Capacitor允许您跨多个平台编写到一个API，但并非所有平台都支持所有功能。建议在使用之前检查您要使用的功能是否可用，以避免任何运行时错误。

在功能组件内部， 添加如下代码：

const { photo, getPhoto} = useCamera();

const handleTakePhoto = () => {
    if(availableFeatures.getPhoto) {
      getPhoto({
        quality: 100,
        allowEditing: false,
        resultType: CameraResultType.DataUrl
      })
    }
}

CameraResultType is imported from “@capacitor/core”

从useCamerahook, 可以返回两个值， 第一个是 photo, 一个CameraPhoto对象，该对象包含了方法返回结果的元数据。一开始将会是undefined,然而，它将在getPhoto方法被调用后，更新为方法的结果。getPhoto方法被调用时，将会运行摄像头拍个照。

handleTakePhoto方法将会在按钮被点击后调用。但这里，我们只是在检查应用程序当前运行的平台是否可以获取照片，然后使用一些选项调用getPhoto方法。

下一步，使用下面的代码替换IonContent的内容：

{availableFeatures.getPhoto ? (
  <div>
    <div><IonButton onClick={handleTakePhoto}>Take Photo</IonButton></div>
    <div>{photo && <img alt="" src={photo.dataUrl} />}</div>
  </div>
) : <div>Camera not available on this platform</div>}

在这里，我们检查该功能是否再次可用（因此我们不会显示按钮,如果功能不可用的话），如果可用， 显示用户界面以拍照并查看照片。

在发送给getPhoto的参数中， 我们指定dataUrl作为返回类型。这种类型为我们返回一个base64编码的字符串。可以直接设置为一个图片的 src属性

完成所有操作后， 我们可以运行 ionic serve, 并在web浏览器中拍照显示。

其他资源

• Demo app with example usages of all the hooks we have so far.
• Ionic React Hooks Repo with docs in the readme.

怎么在ios和android中运行？
查阅： https://ionicframework.com/blog/announcing-ionic-react-hooks/