react-native - Expo Asset.fromModule().localUri 返回 null

Question

我有一个 Expo(版本 34.0.1)应用程序，带有 React native webview。我想将位于 ./assets/webApp/index.html 的静态网站加载到此 webview 中。我正在尝试获取 index.html 文件的本地 uri 路径，但是当我这样做时

const localUri =  Expo.Asset.fromModule(require('./assets/webApp/index.html')).localUri

localUri 变量返回 null。当我得到 uri 而不是 localUri 时，我得到了文件的 URI 路径。我做错了什么？

这是我在 App.js

中的代码

import React from 'react'
import { StyleSheet, Text, View, Platform, SafeAreaView } from 'react-native'
import { WebView } from 'react-native-webview'
import { Asset } from 'expo-asset'

export default function App() {

    const { localUri } = Asset.fromModule(require('./assets/webApp/index.html'))
    console.log(localUri) // Returns null

    return (
        <WebView
            style={styles.webView}
            originWhitelist={['*']}
            source={ Platform.OS === 'android' ?
            { uri: localUri } : require('./assets/webApp/index.html') }
        />
    )
}

这是我的 package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^34.0.1",
    "expo-asset": "~6.0.0",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-web": "^0.11.4",
    "react-native-webview": "~5.12.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^6.0.0"
  },
  "private": true
}

Answer 1

您需要先下载您的资源

this.HTMLFile = Asset.fromModule(require('./bibleWebView/dist/index.html'))

    // We never know, but localUri should always be there
    if (!this.HTMLFile.localUri) {
      Asset.loadAsync(require('./bibleWebView/dist/index.html')).then(() => {
        this.HTMLFile = Asset.fromModule(require('./bibleWebView/dist/index.html'))
        this.setState({ isHTMLFileLoaded: true })
      })
    } else {
      this.setState({ isHTMLFileLoaded: true })
    }