ReferenceError 找不到變量：Image - React Native，create-expo-app。 無法使用 Image() 創建 HTMLImageElement

Question

錯誤

我很早就開始學習使用 React-Native，使用 create-expo-app。

當我運行 npm start 時，我遇到了一個錯誤，給出了這個 output：

錯誤 ReferenceError：找不到變量：圖片

我希望后兩個錯誤是由第一個錯誤引起的。

錯誤不變違規：無法調用 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 時出現早期初始化錯誤時，也會發生這種情況。

我的項目我構建了一個導致錯誤的最小應用程序。

我跑了：

npx create-expo-app TestImage

cd TestImage

npm install --save --legacy-peer-deps react-canvas-map

（反應畫布地圖： https://www.npmjs.com/package/react-canvas-map ）

應用程序.js

錯誤源自第 7 行：“new Image();”

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 上的示例項目-地圖庫）。

一些解釋

Image() 是一個 HTML 標准元素： https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

它等同於“document.getElement("img")”。如果我嘗試這樣做，對於“document”我會得到同樣的錯誤。

錯誤 ReferenceError：找不到變量：文檔

系統詳情

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 ) 中的 HTMLImageElements 的導入？

關於使用“Image()”，React 18.1.0（我的版本）是否要求我做一些與教程（在 16.14.0 上運行）不同的事情？ 我試過將 package.json 中的 react 設置為 16.14.0，然后重新運行 npm 安裝和 npm 啟動（以匹配我在演示中看到的內容 - https://bor3ham.88166911485 ）。 發生相同的錯誤，但它指出：

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

我沒想到這個問題會持續這么久。 我沒有找到任何消息來源談論這個問題，但我可能錯過了它們，因為我不太了解使用什么術語來搜索這里。

Answer 1

我現在已經解決了。

我的問題實際上是以下內容的重復： Exception: Can't find variable: document

引用該問題的解釋性答案： https://stackoverflow.com/a/66003682/20535652

不幸的是，window 和文檔都是 web 標准的一部分，而不是 JavaScript（ECMA 標准）。

React Native 使用 JS 來控制渲染，但本身缺乏 DOM 操作，因此您不能直接在 React Native 中使用許多基於 Web 的 API。

這個答案提出了兩種可能的解決方案：

在 React Native 應用程序中使用 WebView 加載您的 web 應用程序

嘗試自己控制 React Native 組件，重寫邏輯