React Ape

使用Canvas/WebGL构建UI界面的React渲染器

查看文档 (raphamorim.io/react-ape)

加入我们的Discord社群

注意：实验性阶段

React Ape是一款用于通过canvas/WebGL创建用户界面的React渲染器。设计之初作为React-TV的可选渲染器，主要针对电视、PS5、PS4、Nintendo Switch、PS Vita、PS3以及低内存设备的UI开发。

借助React Ape，您可以使用React构建Canvas应用程序。它遵循与React相同的设计原则，让您能够通过声明性组件构建丰富的UI。

理解问题核心

简述： 利用React打造高性能电视用户界面（另外推荐阅读：实现移动网页的60FPS滚动）

基于DOM构建高性能电视用户界面面临挑战，主要原因包括：

• 图形加速限制
• 单核CPU
• 普通电视应用的高内存消耗

这些限制使得实现流畅的60帧每秒体验尤为困难。策略是转向基于硬件加速canvas的渲染器。

示例应用

应用名称	Github链接	应用网址
相册	raphamorim/react-ape-photo-gallery	立即查看
影片列表	raphamorim/react-ape-movie-list-demo	立即查看
在此添加您的应用	-	-

API使用指南

通过NPM或Yarn安装

# 使用NPM
npm install react-ape

# 使用Yarn
yarn add react-ape

React Ape API使用示例

import React, { Component } from 'react';
import { Text, View } from 'react-ape';

class ExampleComponent extends Component {
  render() {
    return (
      <View>
        <Text>在Canvas上渲染这段文字</Text>
        <Text>
          就像使用React Native一样，您只需使用如'View'和'Text'
          这样的React Ape组件。
        </Text>
      </View>
    );
  }
}

在PS Vita上的演示

在电视上的演示

测试环境

React-Ape的CI（持续集成）使用的是macos-latest环境。由于canvas的渲染输出会根据操作系统有所不同（node-canvas的字体栅格化方式随OS而变化），因此需要在同一操作系统上运行测试。如果您希望在不同OS下贡献代码，请确保安装了Docker。

路线图

您可以在这里关注React-Ape的开发进度：路线图

致谢

特别感谢Raphael Eckhardt设计项目图标 🤗