gl-react-native不在物理iOS设备上显示图像

Question

我试图从gl-react获得饱和度示例： Contrast/Saturation/Brightness example 在iphone上工作，但出于某种原因，图像只显示在iOS模拟器上而不是真实设备上。

这是运行iOS 10.3的iphone SE模拟器上显示的内容（一切正常，如示例所示）。 这是运行iOS 10.3的实际 iphone SE上显示的内容

这是代码

 /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { Shaders, Node, GLSL } from 'gl-react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Slider
} from 'react-native';
import { Surface } from 'gl-react-native';

const shaders = Shaders.create({
  Saturate: {
    frag: GLSL`
  precision highp float;
  varying vec2 uv;
  uniform sampler2D t;
  uniform float contrast, saturation, brightness;
  const vec3 L = vec3(0.2125, 0.7154, 0.0721);
  void main() {
    vec4 c = texture2D(t, uv);
    vec3 brt = c.rgb * brightness;
    gl_FragColor = vec4(mix(
      vec3(0.5),
      mix(vec3(dot(brt, L)), brt, saturation),
      contrast), c.a);
  }
  `
  }
});

export const Saturate = ({ contrast, saturation, brightness, children }) =>
  <Node
    shader={shaders.Saturate}
    uniforms={{ contrast, saturation, brightness, t: children }}
  />;



export default class App extends Component<{}> {
  state = {
    contrast: 1,
    saturation: 1,
    brightness: 1
  }

  render() {
    const { contrast, saturation, brightness } = this.state;

    const filter = {
      contrast,
      brightness,
      saturation
    }

    return (
      <View>
        <Text style={styles.header}>
          SaturateGL
        </Text>
        <Surface style={{ width: 300, height: 300 }}>
          <Saturate {...filter}>
            {{ uri: "https://i.imgur.com/uTP9Xfr.jpg" }}
          </Saturate>
        </Surface>
        <Slider
          minimumValue={0}
          maximumValue={4}
          step={0.01}
          value={ contrast }
          onValueChange={ contrast => this.setState({ contrast }) }>
        </Slider>
        <Slider
          minimumValue={0}
          maximumValue={4}
          step={0.01}
          value={ saturation }
          onValueChange={ saturation => this.setState({ saturation }) }>
        </Slider>
        <Slider
          minimumValue={0}
          maximumValue={4}
          step={0.01}
          value={ brightness }
          onValueChange={ brightness => this.setState({ brightness }) }>
        </Slider>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  header: {
    fontSize: 24,
    textAlign: 'center',
    padding: 10,
  },
});

Repo Here

我正在跑步

• gl-react@3.13.0
• gl-react-native@3.13.0
• react-native-webgl@0.70

并且react-native-webgl已正确设置（我已根据安装说明链接了libRNWebGL.a并删除了xcode中的libGPUImage.a。）

我很反应原生，所以我可能做过（或者更糟糕的是，没有做过）某些东西，这有点愚蠢。但如果有人能帮助指出为什么会这样，我会非常感激。这真让我烦恼。

由于

Answer 1

尝试将{{ uri: "https://i.imgur.com/uTP9Xfr.jpg" }}更改为{{ image : { uri: "https://i.imgur.com/uTP9Xfr.jpg" }}}或{{ image: "https://i.imgur.com/uTP9Xfr.jpg" }}

Answer 2

嗨，您可能忘记了为表面造型吗？我花了很长时间才意识到这个错误