修改app.js文件时,Expo.GLView在iOS上不起作用

时间:2019-01-27 18:43:05

标签: javascript expo

我目前正在使用iOS设备上的expo进行Web AR。在最初的过程中,当我修改app.js时,Expo.GLView似乎无法在iOS上运行。

有人可以帮忙吗?

import React from 'react';
import Expo from 'expo';
import { StyleSheet, Text, View } from 'react-native';
import * as THREE from 'three';
import ExpoTHREE from 'expo-three';

export default class App extends React.Component {
  render() {
    return (
        <Expo.GLView
        style={{flex: 1}}
        onContextCreate={this._onGLContextCreate}
        />

    );
  }

  _onGLContextCreate = async (gl) => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, gl.drawingBufferWidth / gl.drawingBufferHeight, 0.1, 1000);
    const renderer = ExpoTHREE.createRenderer({ gl });
    renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);

    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    camera.position.z = 5;

    const animate = () => {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
      gl.endFrameEXP();
    }
    animate();
  }
}

这是我遇到的错误。我之前已经明确遵循了指示。发生什么事了?

[01:45:27] TypeError: undefined is not an object (evaluating '_expo.default.GLView')

1 个答案:

答案 0 :(得分:0)

看起来只是导入中的一个小语法问题。世博会必须具有一个默认的导出,该导出与其各个组件或类似组件分开。以下对我有用:

import { GLView } from 'expo'

我目前正在使用expo-three 3,并将expo-graphics包用于我的GLView元素,我发现它有点麻烦,因为它接受了“ onResize”和“ onRender”的其他支持,因此您不需要分别处理。

npm i --save expo-graphics

然后,而不是从expo导入它,而是从expo图形导入它(该组件在expo图形中仅称为“视图”,因此,如果您要在其中使用其他视图,则可能要使用自己的名称导入它)。相同的组件)

import { View as GraphicsView } from 'expo-graphics'

然后将其替换为标准GLView

  render() {
    return (
        <GraphicsView
        style={{flex: 1}}
        onContextCreate={this._onGLContextCreate}
        />
    );
  }

然后您还可以通过各自的道具添加渲染循环功能和调整大小功能

  render() {
    return (
        <GraphicsView
        style={{flex: 1}}
        onContextCreate={this._onGLContextCreate}
        onResize={this._onResize}
        onRender={this._onRender}
        />
    );
  }