简介
expo-graphics-rnge 是一个基于 Expo 平台的 2D 和 3D 图形库，旨在提供更高效、更简单的方式来在 React Native 应用中绘制图形。
安装
在项目的根目录下执行以下命令安装 expo-graphics-rnge：
npm install expo-graphics-rnge
需要注意的是，expo-graphics-rnge 可以在 Web、iOS 和 Android 平台使用，但只能在支持 WebGL 技术的设备上正常运行。
使用
绘制 2D 图形
我们可以使用 GLView 组件来创建一个带有 WebGL 上下文的容器，这样我们就可以使用 expo-graphics-rnge 提供的 2D 绘制功能进行绘制。以下是一个绘制矩形和文本的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ----------
------ - ------- - ---- ---------------------
------ ------- -------- ----- -
----- --------------- - ---- -- -
----- ------- - --- ------------
----------------
-----------------------
-- ----
-- ----
------ ----
------- ---
------------ --- -- -- ---
---------- --- -- -- ---
------------ --
---
------------------
-- ----
-- ----
----- ------ ---- -------- ------
--------- ---
----------- ---
---------- --- -- -- ---
---
------------------
--
------ -
------- --------------------------------- -------- ----- - -- --
--
-绘制 3D 图形
我们可以使用 GLView 组件来创建一个带有 WebGL 上下文的容器，这样我们就可以使用 expo-graphics-rnge 提供的 3D 绘制功能进行绘制。以下是一个绘制立方体的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ----------
------ - ------- - ---- ---------------------
------ - ----- ---- - ---- ------------
------ ------- -------- ----- -
-- ----
----- ----------- - --- -----------------
----- ---------- - --- -----------------
----- ---------------- - --- -----------------
-- ----
----- --- - --- -- -- ---
----- ----- - --- -- -- ---
----- ---- - --- -- -- ---
-- ------
----- -------- - -
-- --
----- ----- ----
---- ----- ----
---- ---- ----
----- ---- ----
-- --
----- ----- -----
----- ---- -----
---- ---- -----
---- ----- -----
-- --
----- ---- -----
----- ---- ----
---- ---- ----
---- ---- -----
-- --
----- ----- -----
---- ----- -----
---- ----- ----
----- ----- ----
-- ---
----- ----- -----
----- ----- ----
----- ---- ----
----- ---- -----
-- ---
---- ----- ----
---- ----- -----
---- ---- -----
---- ---- ----
--
-- -------
----- ------- - -
-- --
-- -- --
-- -- --
-- -- --
-- -- --
-- --
-- -- ---
-- -- ---
-- -- ---
-- -- ---
-- --
-- -- --
-- -- --
-- -- --
-- -- --
-- --
-- --- --
-- --- --
-- --- --
-- --- --
-- ---
--- -- --
--- -- --
--- -- --
--- -- --
-- ---
-- -- --
-- -- --
-- -- --
-- -- --
--
-- --------
----- ------- - -
-- -- -- -- -- -- -- --
-- -- -- -- -- -- -- --
-- -- --- -- --- --- -- --
--- --- --- --- --- --- -- --
--- --- --- --- --- --- -- ---
--- --- --- --- --- --- -- ---
--
----- --------------- - ---- -- -
----- ------- - --- ------------
----------------
-- ----------------
---------------------------
------------------------- ------------ ------- - ---
------------------------- ------------ ------- - ---
----------------------- --- -- --- --- -- --- --- -- ----
---------------------------------- ------- - -- --------------------- - ----------------------- ---- -----
-- ---------
------------------------------ ----------- ------------------
---------------------------- ------ ------
-- -----
-------------------------------------- -------- ---------
------------------
--
------ -
------- --------------------------------- -------- ----- - -- --
--
-总结
expo-graphics-rnge 是一个非常优秀的 2D 和 3D 图形库，它提供了非常便捷的 API 以及基于 WebGL 技术的图形绘制功能，使得我们可以更加高效、简单的在 React Native 应用中绘制图形。在使用 expo-graphics-rnge 进行开发时，我们需要特别关注设备对于 WebGL 技术的支持情况，避免出现不兼容等问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735b890c4f7277583f76