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

Posted 2023-03-11

【中文标题】gl-react-native 不在物理 iOS 设备上显示图像

【英文标题】：gl-react-native not displaying image on physical iOS device

【发布时间】：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 上发布问题。

【参考方案1】：

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

【讨论】：

请解释您的代码行，以便其他用户了解其功能。谢谢！

我认为它本身就很容易解释，搜索字符串，用第一个或第二个选项替换那部分代码。 :)

【参考方案2】：

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

【讨论】：

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