javascript - Surface gl-react-native 不显示任何内容或崩溃

Question

我一直在尝试使用 gl-react-native 类的 Surface 来查看输出是什么，但每当我尝试运行代码片段时，应用程序崩溃或应用程序正在运行但显示只是一个白色屏幕。

这是我的代码:

import { Shaders, Node, GLSL } from "gl-react";
import { Surface } from "gl-react-native";

import React from "react";
import { Shaders, Node, GLSL } from "gl-react";
const shaders = Shaders.create({
  helloBlue: {
    frag: GLSL`
precision highp float;
varying vec2 uv;
uniform float blue;
void main() {
  gl_FragColor = vec4(uv.x, uv.y, blue, 1.0);
}`
  }
});
class HelloBlue extends Component {
  render() {
    const { blue } = this.props;
    return <Node shader={shaders.helloBlue} uniforms={{ blue }} />;
  }
}

export default class App extends Component {
  render() {
    return (
      <Surface width={300} height={300}>
        <HelloBlue blue={0.5} />
      </Surface>
    );
  }
}

这是我的依赖项:

"dependencies": {
    "buffer": "^5.5.0",
    "expo-permissions": "^8.1.0",
    "gl-react": "^4.0.1",
    "gl-react-headless": "^4.0.1",
    "gl-react-native": "^4.0.1",
    "react": "16.11.0",
    "react-native": "0.62.0",
    "react-native-unimodules": "^0.7.0"
  }

在这种情况下，我只得到一个白屏作为输出:

import React, { Component } from "react";
import { Shaders, Node, GLSL } from "gl-react";
import { Surface } from "gl-react-native";

import React from "react";
import { Shaders, Node, GLSL } from "gl-react";
const shaders = Shaders.create({
  helloBlue: {
    frag: GLSL`
precision highp float;
varying vec2 uv;
uniform float blue;
void main() {
  gl_FragColor = vec4(uv.x, uv.y, blue, 1.0);
}`
  }
});
class HelloBlue extends Component {
  render() {
    const { blue } = this.props;
    return <Node shader={shaders.helloBlue} uniforms={{ blue }} />;
  }
}

export default class App extends Component {
  render() {
    return (
      <Surface style={{ width: 300, height: 300 }}>
        <HelloBlue blue={0.5} />
      </Surface>
    );
  }
}

当我运行这段代码时，应用程序根本没有响应，当我在模拟器上运行它时，应用程序崩溃了。

Answer 1

获取正确的版本

npm i --save react-native-gl-image-filters
npm i --save gl-react@^4.0.1
npm i --save gl-react-native@^4.0.1
npm i --save buffer@^5.4.3
npm i --save react-native-unimodules@^0.7.0

unimodules ^0.10.1 也可以工作