"错误"
我在早期学习使用React-Native,使用create-expo-app。
当我运行npm start时,我遇到了一个错误,给出了以下输出:
错误参考错误:找不到变量:图像
我预计后两个错误是由第一个错误引起的。
错误:不变量冲突:无法调用JavaScript模块方法AppRegistry.runApplication()。模块尚未注册为可调用。已注册的可调用JavaScript模块(n = 11):Systrace、JSTimers、HeapCapture、SamplingProfiler、RCTLog、RCTDeviceEventEmitter、RCTNativeAppEventEmitter、GlobalPerformanceLogger、JSDevSupportModule、HMRClient、RCTEventEmitter。错误的常见原因是应用程序项目档案路径不正确。当JS配套损毁或载入React Native时发生早期初始化错误时,也会发生这种情况。
错误:不变量冲突:无法调用JavaScript模块方法AppRegistry.runApplication()。模块尚未注册为可调用。已注册的可调用JavaScript模块(n = 11):Systrace、JSTimers、HeapCapture、SamplingProfiler、RCTLog、RCTDeviceEventEmitter、RCTNativeAppEventEmitter、GlobalPerformanceLogger、JSDevSupportModule、HMRClient、RCTEventEmitter。错误的常见原因是应用程序项目档案路径不正确。当JS配套损毁或载入React Native时发生早期初始化错误时,也会发生这种情况。
我的项目我构建了导致错误的最小应用程序。
我扑过去:
第一个
(React画布贴图:(第10页)
应用程序js
错误源自第7行:“新建图像();“
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import React, { useState } from 'react'
import { Map, Marker } from 'react-canvas-map'
const markerOneImage = new Image();
markerOneImage.src = './static/marker-blue.svg';
export default function App() {
const [markerOneCoords, setMarkerOneCoords] = useState({ x: 100, y: 200 })
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
<div style={{ height: '50vh', border: '1px solid #ddd', marginTop: '1rem' }}>
<Map
image={"./static/map.jpg"}
>
<Marker
image={markerOneImage}
markerKey={"marker-one"}
coords={markerOneCoords}
onDragTick={setMarkerOneCoords}
onDragEnd={setMarkerOneCoords}
onClick={() => {
alert('You clicked marker one!')
}}
/>
</Map>
</div>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
当我执行
npm start
(调用expo start
)
我的全部代码要么来自标准的create-expo-app样板代码,要么来自一个可演示的工作示例:https://bor3ham.github.io/react-canvas-map/(react-canvas-map库上的示例项目)。
一些解释
Image()是一个HTML标准元素:https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
它相当于“document.getElement(“img”)。如果我尝试这样做,我会得到同样的错误,对于'document'。
错误参考错误:找不到变量:文件
系统详细信息
npm --version
8.19.3
package.json:
{
"name": "testimage",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"expo": "~47.0.6",
"expo-status-bar": "~1.4.2",
"react": "18.1.0",
"react-canvas-map": "^0.1.8",
"react-native": "0.70.5"
},
"devDependencies": {
"@babel/core": "^7.12.9"
},
"private": true
}
我的项目设置是否不正确?
我是否缺少允许我使用HTML标准规范(https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement)中的HTMLImageElement的导入?
React 18.1.0(我的版本)是否要求我做一些与教程(运行在16.14.0上)不同的与使用“Image()"有关的事情?我试过将package.json中的react设置为16.14.0,然后重新运行npm install和npm start(以匹配我在演示-https://bor3ham.github.io/react-canvas-map/中看到的内容)。同样的错误发生了,尽管它指出:
Some dependencies are incompatible with the installed expo version:
react@16.14.0 - expected version: 18.1.0
Your project may not work correctly until you install the correct versions of the packages.
Install individual packages by running npx expo install react@18.1.0
我没想到这个问题会持续这么久。我还没有发现任何来源谈论这个问题,但我可能错过了他们,因为我没有很好地掌握什么术语来搜索这里。
1条答案
按热度按时间dced5bon1#
我已经想好了。
我的问题实际上是重复的:Exception: Can't find variable: document
从这个问题中引用一个解释性的答案:https://stackoverflow.com/a/66003682/20535652
不幸的是,窗口和文档都是Web标准的一部分,而不是JavaScript(ECMA标准)。
React Native使用JS来控制渲染,但本身缺乏DOM操作,因此您无法直接在React Native中使用许多基于Web的API。
这个答案提出了两种可能的解决方案:
在React Native应用中使用WebView加载Web应用
尝试自己控制React Native组件,重写逻辑