Question

我正在学习使用gl-react-native在反应本机项目上应用图像转换。我尝试在this documentation中实施其中一个示例，但应用程序错误消息时出现以下消息。

GL.Node元素只能用作GL.Surface / GL.Node的子元素并且不应该呈现。

在文档之后，我创建了GL组件：

module.exports = GL.createComponent(
  ({ factor, image }) => <GL.Node shader={shaders.saturation} uniforms={{ factor, image }}/>,
{ displayName: "Saturation" });

如果我删除此代码并在我的GL.Node方法中创建render()，则该应用成功并且节点呈现正确，如下所示：

<Surface width={511} height={841}>
   <GL.Node shader={shaders.myShader} /> /* just an example shader that would work */
</Surface>

但是当我尝试定义GL组件时，应用程序会中断。是否存在解析错误，导致<GL.Node>无法使用GL.createComponent？我完全难过了。任何帮助是极大的赞赏。这是完整的代码：

import React, { Component } from 'react';
import { Surface } from "gl-react-native";

const GL = require("gl-react");
const shaders = GL.Shaders.create({
  saturation: {
    frag: `
precision highp float;
varying vec2 uv;
uniform sampler2D image;
uniform float factor;

void main () {
  vec4 c = texture2D(image, uv);
  // Algorithm from Chapter 16 of OpenGL Shading Language
  const vec3 W = vec3(0.2125, 0.7154, 0.0721);
  gl_FragColor = vec4(mix(vec3(dot(c.rgb, W)), c.rgb, factor), c.a);
}
    `
  }
});

module.exports = GL.createComponent(
  ({ factor, image }) => <GL.Node shader={shaders.saturation} uniforms={{ factor, image }}/>,
{ displayName: "Saturation" });

export default class Background extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Surface width={511} height={841}>
        <Saturation
          factor={saturationFactor}
          image="http://i.imgur.com/iPKTONG.jpg"
        />
      </Surface>
    );
  }
}

Answer 1

module.exports似乎不起作用。相反，我将组件设置为const。

以下GL组件定义适用于我：

const Saturation = GL.createComponent(
  ({ factor, image }) => <GL.Node shader={shaders.saturation} uniforms={{ factor, image }}/>,
{ displayName: "Saturation" });

如何使用GL反应原生createComponent

1 个答案: