react-native - 不变违规：元素类型无效：预期为字符串（用于内置组件）

Question

嗨，我是 React native 的新手，我正在编写代码以使用 gl-react 在图像或任何渐变表面上编写文本，但是在运行代码时遇到了这个问题。

这是我遇到问题的代码。

import React, {Component} from 'react';
import {Text, View, TouchableOpacity, Image, TextInput} from 'react-native';
import styles from '../styles/search-web-screen-styles.js';
import LinearGradient from 'react-native-linear-gradient';
import {Surface} from 'gl-react-native';
import { Blur } from "gl-react-blur";

const GL = require("gl-react");

const shaders = GL.Shaders.create(
  {
      textOverImage: {
        frag:`
        precision highp float;
        varying vec2 uv;

        uniform sampler2D img;
        uniform sampler2D imgBlurred;
        uniform sampler2D txt;

        const vec2 shadowCenter = vec2(0.5, 0.9);
        const vec2 shadowSize = vec2(0.6, 0.2);
      float shadow () {
        return 0.8 * smoothstep(1.0, 0.2, distance(uv / shadowSize, shadowCenter / shadowSize));
          }
      float monochrome (vec3 c) {
      return 0.2125 * c.r + 0.7154 * c.g + 0.0721 * c.b;
        }
     vec3 textColor (vec3 bg) {
     return vec3(step(monochrome(bg), 0.6));
      }

    void main () {
     vec4 bg = mix(texture2D(img, uv), texture2D(imgBlurred, uv), shadow());
     vec4 fg = vec4(textColor(texture2D(imgBlurred, shadowCenter).rgb), 1.0);
    float fgFactor = 1.0 - texture2D(txt, uv).r;
    gl_FragColor = mix(bg, fg, fgFactor);
             }`
           }
     }
    );

    class HelloBlue extends React.Component
     {
       render()
        {
         const { txt, img =   "https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg" , width = 300, height = 300 } = this.props;
       return <GL.Node shader={shaders.textOverImage}>
            <GL.Uniform name="img">
              {img}
            </GL.Uniform>
            <GL.Uniform name="imgBlurred">
              <Blur factor={20} passes={6} width={width} height= {height}>
                {img}
              </Blur>
            </GL.Uniform>
            <GL.Uniform name="txt">
              <Text style={styles.TextInputStyleClass}>{txt}</Text>
            </GL.Uniform>
      </GL.Node>;
      }
     }


 export default class WebSearchScreen extends Component
   {
   render()
     {
      return(
        <View style={styles.container}>
         <View style={styles.view_top_bg}>
          <TouchableOpacity style={styles.cross_btn_bg}
            onPress = {() => this.props.navigation.goBack()}>
              <Image source={require('../assets/icons/cross_1x.png')} />
          </TouchableOpacity>
      </View>

      <View style={styles.view_bottom_bg}>
            <LinearGradient start={{x: 1.0, y: 0.5}} end={{x: 0.5, y: 1.0}}
                            locations={[0.1,0.4,1.0]}
                            colors={['#66c6ff', '#68e3ff', '#ed89ff']}
                            style={styles.LinearGradientStyle} >
                <TextInput
                    placeholder="Tap to type..."
                    placeholderTextColor="#dbdbdb"
                    underlineColorAndroid='transparent'
                    style={styles.TextInputStyleClass}/>
            </LinearGradient>
      </View>

      <Surface style={styles.view_center_bg}>
          <HelloBlue txt='Hello world' />
      </Surface>


  </View>
   )
   }
   }

我搜索了很多，但没有找到任何成功。如果有人有任何解决方案或我做错了什么，请提供帮助。提前致谢。

标签： react-native