时间戳

首页 > 解决方案 > 修改 app.js 文件时，Expo.GLView 在 iOS 上不起作用

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

问题描述

我目前正在使用我的 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')

标签： javascriptexpo

解决方案

看起来只是导入时的一个小语法问题。Expo 必须有一个与其各种组件或类似的东西分开的默认导出。以下对我有用：

import { GLView } from 'expo'

我目前正在使用 expo-three 并为我的 GLView 元素使用包 expo-graphics，我发现它有点方便，因为它接受“onResize”和“onRender”的额外道具，所以你不需要单独处理这些.

npm i --save expo-graphics

然后不是从 expo 导入它，而是从 expo graphics 导入它（该组件在 expo-graphics 中只是称为“视图”，因此如果您正在使用同一个组件中的其他视图，您可能希望使用自己的名称导入它)

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}
        />
    );
  }

推荐阅读