expo-gl

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅发布说明。

@amazon-devices/expo-gl提供充当OpenGL ES呈现目标并提供GLContext的GLView。

挂载GLView时，会创建OpenGL ES上下文。它应该接收onContextCreate函数，该函数采用gl对象。这个gl对象是与OpenGL交互的核心方式 - 通过使用JSI，expo-gl在gl对象上创建与webgl API方法相对应的方法，例如gl.clearColor。它本身并不提供呈现每帧图像的方式，必须对其使用其他JS函数（例如setInterval）。GLView的绘制缓冲区呈现为通过调用endFrameEXP方法指示的每帧视图的内容。以EXP为后缀的方法是expo-gl的扩展。

ExpoGL还为无头呈现提供了静态方法（即可在没有GLView的情况下使用）- 请参阅createContextAsync和takeSnapshotAsync的文档。

这是一个系统部署的库，可供适用于Vega的React Native应用使用，无需单独的安装过程。它作为自动链接库进行部署，您的应用在运行时会链接到该库。只能在库和为其构建的适用于Vega的React Native版本之间保证兼容性。

安装
示例
API参考
- 组件
  - GLView属性
- 方法
实现详情
支持的版本
其他资源

安装

在package.json文件中添加JavaScript库依赖项。

已复制到剪贴板。

 "dependencies": {
     ...
     "@amazon-devices/expo-gl": "~2.0.0",
     "react": "~18.2.0",
     ...
     },
     ...
 "overrides": {
     "react": "~18.2.0"
     },

使用npm install命令重新安装依赖项。

示例

已复制到剪贴板。

import React from 'react';
import {StyleSheet, View} from 'react-native';
import {GLView} from '@amazon-devices/expo-gl';

export const App = () => {
  return (
    <View style={styles.container}>
      <GLView style={styles.gl} onContextCreate={onContextCreate} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  gl: {
    width: 300,
    height: 300,
  },
});

// @ts-ignore隐含any
function onContextCreate(gl) {
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0, 1, 1, 1);

  // 创建顶点着色器（形状和位置）
  const vert = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(
    vert,
    `
    void main(void) {
      gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
      gl_PointSize = 150.0;
    }
  `,
  );
  gl.compileShader(vert);

  // 创建片段着色器（颜色）
  const frag = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(
    frag,
    `
    void main(void) {
      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
    }
  `,
  );
  gl.compileShader(frag);

  // 一起链接到一个程序中
  const program = gl.createProgram();
  gl.attachShader(program, vert);
  gl.attachShader(program, frag);
  gl.linkProgram(program);
  gl.useProgram(program);

  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.POINTS, 0, 1);

  gl.flush();
  gl.endFrameEXP();
}

API参考

请您查看以下专门文档页面，了解有关此库、API参考等的信息：针对expo-gl的官方Expo文档（仅提供英文版）。

组件

组件	描述
`GLView`	充当OpenGL ES呈现目标的视图。安装时，会创建OpenGL ES上下文。它的绘制缓冲区呈现为每帧视图的内容。

GLView属性

属性	描述
`enableExperimentalWorkletSupport`	利用该属性，将能够支持与Reanimated worklet线程上运行的代码中的gl对象进行交互。
`onContextCreate`	创建OpenGL ES上下文时将调用的函数。该函数传递可扩展`WebGLRenderingContext`接口的单个参数`gl`。

方法

方法	方法类型	描述
`createContextAsync`	静态方法	命令式API，用于创建没有底层视图的无头上下文。它对于无头呈现有用，或者在您希望为每个应用只保留一个上下文并在多个组件之间共享它时也会有用。
`destroyContextAsync`	静态方法	销毁给定上下文
`takeSnapshotAsync`	静态方法	截取framebuffer的快照并将其以文件形式保存到应用的缓存目录中。
`destroyObjectAsync`	组件方法	销毁给定的`WebGLObject`，例如纹理。
`takeSnapshotAsync`	组件方法	与静态`takeSnapshotAsync()` 相同，但使用与调用该方法的视图关联的WebGL上下文。

实现详情

Vega上的@amazon-devices/expo-gl库不支持以下方法：createCameraTextureAsync和startARSessionAsync。

支持的版本

程序包版本	基于	@amazon-devices/react-native-kepler版本
2.0.x	13.4.0	2.0.x

其他资源

有关其他库的信息，请参阅支持的第三方库和服务。

Last updated: 2025年9月30日