npm 包 expo-graphics 使用教程
在前端开发中，创建用户界面通常需要涉及各种图形和动画效果。这种需求再加上设备与平台众多，使得开发人员不得不使用各种库来满足各种不同的应用场景和需求。在 React Native 应用程序中创建可见图形，NPM包 expo-graphics 是一种非常有用的解决方案。
介绍
expo-graphics 是一个适用于 React Native 应用程序的第三方绘图库。它提供了一种创建动画，绘制2D / 3D图形以及实现各种渲染技术的方式。该库基于 WebGL API 或 OpenGL，提供了用于创建图形效果的一系列API。
安装依赖
在继续操作之前，首先需要安装 expo-graphics。要使用 expo-graphics，请在终端（或者命令提示符）中执行以下命令：
$ npm install expo-graphics
快速入门
以下是一些基础概念和注意事项：
请确保您已经安装了最新版本的 Expo和React Native。
如果您的应用需要在移动设备上运行，请务必注意 GPU 处理的性能。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ----------
------ - --------- ------------- - ---- ----------------
------ ------- -------- ----- -
----- --------------- - ----- -- -- -
----- -------- - --- ----------
---
------ ----------------
------- -----------------
---
----- ------- - ----- ------------------------
---------------------------------
--
-----------------
--------
-------- ------- - --
-------- ------- - --
------ -
---------- --- -- ---
------ ----- ---- ---- ---
--
---
--
------ -
------- -------- ----- - -- --------------------------------- --
--
-在这个示例中我们：
使用 Expo 提供的图形组件渲染器和纹理加载器。
在应用程序的 GLView 中使用所有渲染器 API。
通过纹理 URL 加载纹理。
对特定传递的选项设置相应的约束。
创建静态图形
使用此库的一个非常简单的方式是在您的 React Native 应用程序中创建一个静态图像。您可以使用 npm 包可用的三个选项之一来完成此任务：PixelRatio，Image 或 ImageBackground。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ----------- ----- ---- - ---- ---------------
------ ------- -------- ----- -
------ -
----- -------------------------
----- ------------------------ -- - ------ ------------
----- ------------------------------
------
---------
---- ----------------------------------
--
--------------------
--
-------
----- ------------------------------
----- ----------------------------- ---- -- --- ----- ---------------
-------
-------
--
-
----- ------ - -------------------
---------- - ----- - --
----- - --------- -- --
--------------- -
---------- ---
------------ -------
------------ --
----- --
--
------ - ----- - --
--------------- -
---------- ---
------------ --------
------------ --
-------- --
--
---------- -
--------- -----------------------------------------
--
---创建动态图形
如果你的应用程序需要一些动态的图形元素，你可以使用系统本地支持的 WebGL 层。为此，需要创建一个 GL 容器并在 WebGL 上下文中为应用程序提供必要的 API。以下示例说明如何使用 expo-graphics 的 Renderer 和 TextureLoader API。
-- -------------------- ---- -------
------ ------ - ----------- - ---- --------
------ - ------- ----------- ---- - ---- ---------------
------ - ------ - ---- ----------
------ - --------- ------------- - ---- ----------------
------ ------- -------- ----- -
----- --------------- - ----------------- -- -- -
----- -------- - --- ----------
---
------ ----------------
------- -----------------
---
----- ------- - ----- ------------------------
---------------------------------
--
----- ------- - -- -- -
-----------------
--------
-------- ------- - --
-------- ------- - --
------ -
---------- --- -- ---
------ ----- ---- ---- ---
--
---
-----------------
-------------------------------
--
----------
-- ----
------ -
----- -------------------------
------- -------------------------- --------------------------------- --
----- -------------------------------
------- ------------ -- ----- ---------- ----------- -- --- --
-------
-------
--
-
----- ------ - -------------------
---------- - ----- - --
------------ - ----- - --
---------------- -
---------- ---
----------- ---------
--
---结论
创建动画和可见图形在 React Native 开发中通常会变得复杂和耗时。尤其是在移动设备上，由于较低的渲染能力，可能需要更具体的优化。由于 Expo-Graphics 具有诸多有用的 API，通过此库能够大量简化图形处理的代码编写任务，使开发者能够更有效地创建用户界面，并更加专注于开发创新功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672503660cf7123b362a4