React Native应用程序在发布时崩溃，但在调试时尝试使用React Three Fiber渲染3d .glb模型

Question

我有一个裸露的react原生应用程序，其中包含expo-gl和react-three/fiber和react-three/drei的expo-模块。我试图在一个单独的。jpg文件中渲染一个带有动画和外部纹理的3d .glb模型，在调试时一切正常，但在发布时，一旦应用程序打开，应用程序就会崩溃。

FATAL EXCEPTION: mqt_native_modules com.facebook.react.common.JavascriptException: Error: Could not load 36: undefined)

这是我在adb logcat

中得到的错误github回购下面是app.js中的代码:

import React, { Suspense, useEffect, useRef, useState } from 'react'
import {View, Text, Button} from 'react-native';
import { useFrame, Canvas, useLoader, useThree, extend } from '@react-three/fiber/native'
import { useGLTF, Environment, useAnimations, useTexture } from '@react-three/drei/native'
import iphoneModelPath from './assets/iphone.glb'
import stacy from './assets/stacy.glb';
import stacyTex from './assets/stacy.jpg';
// import {Ipgone} from './Iphone.js';
// import * as THREE from 'three';
import useControls from 'r3f-native-orbitcontrols'
function StacyModel({url, url1}, props) {
const { nodes, animations } = useGLTF(url)
const texture = useTexture(url1)
const { ref, actions, names } = useAnimations(animations)
const [hovered, setHovered] = useState(false)
const [index, setIndex] = useState(3)
useFrame((state, delta) =>{
actions[names[index]].play();
})  
return (
<group onClick={(event) => setIndex((index + 1) % names.length)} ref={ref} {...props} dispose={null}>
<group rotation={[Math.PI / 2, 0, 0]} position={[0,-4,0]} scale={0.04}>
<primitive object={nodes.mixamorigHips} />
<skinnedMesh
geometry={nodes.stacy.geometry}
skeleton={nodes.stacy.skeleton}
rotation={[-Math.PI / 2, 0, 0]}
scale={100}>
<meshStandardMaterial map={texture} map-flipY={false} skinning />
</skinnedMesh>
</group>
</group>
)
}
// useGLTF.preload(iphoneModelPath)
export default function App() {
const[OrbitControls, events] = useControls();
return (
<View style={{flex: 1}} {...events}>
<Canvas gl={{ physicallyCorrectLights: true }} camera={{ position: [0, 0, 16], fov: 50 }} 
onCreated={(state) => {
const _gl = state.gl.getContext()
const pixelStorei = _gl.pixelStorei.bind(_gl)
_gl.pixelStorei = function(...args) {
const [parameter] = args
switch(parameter) {
case _gl.UNPACK_FLIP_Y_WEBGL:
return pixelStorei(...args)
}
}
}}
>
<color attach="background" args={[0x000000]} />
<directionalLight intensity={0.8} position={[-6, 2, 2]}/>
<Suspense>
<Environment preset="park" />
<StacyModel url={stacy} url1={stacyTex} />
</Suspense>
<OrbitControls />

</Canvas>
{/* </OrbitControlsView> */}
</View>

)
} 

您可以查看构建。从repo中的Gradle文件。任何帮助都会很感激。谢谢!

我尝试捆绑资产，在构建中最小化-js: false。Gradle，但没有什么应该工作。如果有人能提供进一步的信息，关于正在发生的事情以及如何解决。我将不胜感激。

Answer 1

我找到了解决方案:https://github.com/pmndrs/react-three-fiber/issues/2577

import { resolveAsync } from "expo-asset-utils";
import { GLTF } from "three/examples/jsm/loaders/GLTFLoader";
import { decode } from "base64-arraybuffer";
import * as FileSystem from "expo-file-system";
import { GLTFLoader } from "three-stdlib";
async function loadFileAsync({ asset, funcName }) {
if (!asset)
throw new Error(`ExpoTHREE.${funcName}: Cannot parse a null asset`);
return (await resolveAsync(asset)).localUri ?? null;
}
export async function loadGLTFAsync({ asset, onAssetRequested }) {
const uri = await loadFileAsync({
asset,
funcName: "loadGLTFAsync",
});
if (!uri) return;
const base64 = await FileSystem.readAsStringAsync(uri, {
encoding: FileSystem.EncodingType.Base64,
});
const arrayBuffer = decode(base64);
const loader = new GLTFLoader();
return new Promise<GLTF>((resolve, reject) => {
loader.parse(
arrayBuffer,
onAssetRequested,
(result) => {
resolve(result);
},
(err) => {
reject(err);
}
);
});
}
export const loadFile = (file) => {
return loadGLTFAsync({
asset: file,
onAssetRequested: (...args) => console.log(args),
}).catch((...args) => console.error("LoadFileError" + JSON.stringify(args)));
};

使用LoadFile来加载你的模型