Console

Settings

Sign out

Notifications

Alexa

亚马逊应用商店

Ring

AWS

文档

Support

My Cases

Console

Vega开发者文档

主页

新手入门

设计和开发

应用发布

参考

支持

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.1",
     "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`	创建没有底层视图的无头上下文。此方法对于无头呈现有用，或者在您希望为每个应用程序只保留一个上下文并在多个组件之间共享它时也会有用。	✅ 是
`destroyContextAsync`	销毁给定上下文。	✅ 是
`takeSnapshotAsync`	截取framebuffer的快照并将其以文件形式保存到应用的缓存目录中。	✅ 是
`destroyObjectAsync`	销毁给定的`WebGLObject`，例如纹理。	✅ 是
`takeSnapshotAsync`	与静态`takeSnapshotAsync()` 相同，但使用与调用该方法的视图关联的WebGL上下文。	✅ 是
`createCameraTextureAsync`	`@amazon-devices/expo-gl`不支持。Expo文档：https://docs.expo.dev/versions/latest/sdk/gl-view/#component-methods（仅提供英文版）	❌ 否
`startARSessionAsync`	`@amazon-devices/expo-gl`不支持。已从Expo AR API中弃用。	❌ 否

支持的版本

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

支持的第三方库和服务

Last updated: 2025年9月30日

expo-gl

安装

示例

API参考

组件

GLView属性

方法

支持的版本

相关主题