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

【问题标题】：gl-react-native not displaying image on physical iOS devicegl-react-native 不在物理 iOS 设备上显示图像
【发布时间】：2017-11-04 21:35:15
【问题描述】：

我正在尝试从 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 还是很陌生，所以我可能已经做过（或者更糟的是，还没有做过）一些事情，这有点愚蠢。但是，如果有人可以帮助指出为什么会发生这种情况，我将不胜感激。这真的让我很烦。

谢谢

【问题讨论】：

你好@user3075259 我也有同样的问题，你找到解决办法了吗？
嗨@Priya 不，对不起，我从来没有这样做过。我认为 gl-react 正在使用的库之一在我发布此内容时仍在开发中，并且并非所有功能都已实现（如果我没记错的话，我可能是错的），所以我不知道这已经改变了.我也没有尝试下面发布的代码 ESA2012，因为那时我已经放弃了该项目，所以我不知道这是否有效。我也不再拥有我的苹果开发者帐户，所以我无法尝试。如果可以的话，我会试一试并支持他们，除此之外，可能会在 gl-react git 上发布问题。

标签： ios iphone react-native webgl

【解决方案1】：

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

【讨论】：

请解释您的代码行，以便其他用户了解其功能。谢谢！
我认为它本身就很容易解释，搜索字符串，用第一个或第二个选项替换那部分代码。 :)

【解决方案2】：

您好，您可能忘记设置表面样式了吗？我花了很长时间才意识到这个错误

【讨论】：

这应该是评论，而不是答案。