Я пытался использовать класс Surface класса gl-react-native, чтобы увидеть, что выводится, но всякий раз, когда я пытался запустить фрагмент кода, либо приложение вылетало, либо приложение работало, но на дисплее был только белый экран.

Вот мой код:

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>
    );
  }
}

Когда я запускаю этот код, приложение вообще не отвечает, а когда я запускаю его на эмуляторе, приложение вылетает.

3
Nikhil Garg 2 Апр 2020 в 09:31
Не могли бы вы попробовать добавить поверхность в компонент VIEW реактивного натива.
 – 
Nitin Kumar
2 Апр 2020 в 09:50
Пробовал это также @NitinKumar, ничего не происходит, отображается только белый экран.
 – 
Nikhil Garg
6 Апр 2020 в 10:05

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

Унимодули ^0.10.1 тоже будут работать

0
Ambesh Tiwari 21 Сен 2020 в 14:45