我目前正在使用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')
答案 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}
/>
);
}