Question

我在react-native app上收到以下错误：

错误：捆绑失败：＆＃34; TransformError： /Users/codeaway/repos/webGL/node_modules/react-native-webgl/lib/index.js：无法找到预设\'＃34; stage-1 \＆＃34;相对于目录 \＆＃34; /用户/ codeaway /回购/ WEBGL / node_modules /反应天然-webgl的\＆＃34;＆＃34;

我正在构建一个本机应用程序，我需要在照片上实现过滤器，所以我想使用以下npm包（来自我的package.json）：

"gl-react": "^3.13.0"
"gl-react-native": "^3.13.0"
"react-native-webgl": "^0.5.2"

代码非常简单;我真的只是想从包的文档中运行样本：

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

const shaders = Shaders.create({
  helloGL: {
// This is our first fragment shader in GLSL language (OpenGL Shading Language)
// (GLSL code gets compiled and run on the GPU)
    frag: GLSL`
precision highp float;
varying vec2 uv;
void main() {
  gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
}
`
// the main() function is called FOR EACH PIXELS
// the varying uv is a vec2 where x and y respectively varying from 0.0 to 1.0.
// we set in output the pixel color using the vec4(r,g,b,a) format.
// see GLSL_ES_Specification_1.0.17
  }
});

export default class webGL extends Component {
  render() {
    return (
      <View>
      <Surface width={200} height={200}>
        <Node shader={shaders.helloGL} />
      </Surface>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('webGL', () => webGL);

这是错误中提到的目录中的.bablerc（＆＃34; / Users / codeaway / repos / webGL / node_modules / react-native-webgl \＆＃34;）：

{
  "presets": ["es2015", "stage-1", "react"]
}

这里发生了什么？

Answer 1

您需要将以下软件包添加到 package.json 文档

"babel-core": "^6.24.1"
"babel-preset-stage-1": "^6.24.1"

然后使用npm install安装它们。

似乎无论你在项目中使用什么捆绑（可能是Webpack），都会使用带有阶段1预设的babel。

React-native捆绑失败，因为＆＃34;无法找到预设的＆＃39; stage-1＆＃39;＆＃34;

1 个答案: