ios - 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)。

我是 react-native 的新手，所以我可能已经做过(或者更糟的是，还没有做过)一些有点愚蠢的事情。但是，如果有人可以帮助指出为什么会这样，我将不胜感激。这真让我恼火。

谢谢

Answer 1

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