GLの使用方法native native createComponent

Question

私はgl-react-nativeを使用して、反応したネイティブプロジェクトに画像変換を適用することを学んでいます。私はthis documentationにサンプルの1つを実装しようとしていますが、次のメッセージでアプリケーションエラーが発生します。

GL.Node要素は、GL.Surface/GL.Node の子としてのみ使用でき、レンダリングすべきではありません。ドキュメント以下

、私はGLコンポーネントを作成します。私はこのコードを削除し、単に私のrender()方法でGL.Nodeを作成する場合は、アプリが成功し、ノードは同様に正しくレンダリングさ

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

：

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

しかし、私はGLコンポーネントを定義しようとするとアプリケーションが壊れます。 GL.createComponentに<GL.Node>が使用されないようにする解析エラーがありますか？私は完全に困惑している。どんな助けでも大歓迎です。完全なコードは次のとおりです。

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