时间戳

首页 > 解决方案 > Asset.fromModule 不是函数。（在 'Asset.fromModule(image)' 中，'Asset.fromModule' 未定义）

javascript - Asset.fromModule 不是函数。（在 'Asset.fromModule(image)' 中，'Asset.fromModule' 未定义）

问题描述

更新到 Expo sdk 34 后，我收到此错误： TypeError: Asset.fromModule is not a function. (In 'Asset.fromModule(image)', 'Asset.fromModule' is undefined).

我已经运行了 Expo 建议使用此命令的 cod-mod：npx expo-codemod sdk33-imports src当更新到新版本时，我也尝试更改import * as Asset from 'expo-asset';为import { Asset } from 'expo-asset'，但这些更改都没有修复此警告。

这是我的 App.js

import React from 'react';
import { Dimensions, Alert } from 'react-native';
import {Root} from 'native-base';
import {createRootNavigator} from './router';
import {configureFontAwesomePro} from "react-native-fontawesome-pro";
import Geocoder from 'react-native-geocoding';
import { AppLoading } from 'expo';
import * as Asset from 'expo-asset';
import * as Font from 'expo-font';
import Api from './services/api';
import Moment from 'moment';
import Config from './config/config';
import './i18n';
import store from './store/store';
import i18n from 'i18n-js';

configureFontAwesomePro();
const RootNav = createRootNavigator();

function cacheImages(images) {

    return images.map(image => {
        if (typeof image === 'string') {
            return Image.prefetch(image);
        } else {
            return Asset.fromModule(image).downloadAsync();
        }
    });
}

function cacheFonts(fonts) {
    return fonts.map(font => Font.loadAsync(font));
  }


export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            isReady: false
        };

    }

    async _loadAssetsAsync() {
        const imageAssets = cacheImages([
            require('./assets/images/splash.png'),
            require('./assets/images/splash-logo.png'),
            require('./assets/images/hotdrink.png'),
            require('./assets/images/insta.png'),
            require('./assets/images/twitter.png'),
            require('./assets/images/facebook.png'),
            require('./assets/images/yelp.png'),
        ]);

        store.updatePrefix(Expo.Linking.makeUrl('/'));

        const fontAssets = cacheFonts(
            [{
                Roboto: require("native-base/Fonts/Roboto.ttf"),
                Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
                Ionicons: require("@expo/vector-icons")
            }]
        );

        await Promise.all([...imageAssets, ...fontAssets]);
    }

    render() {
        if (!this.state.isReady) {
            return (<AppLoading
                startAsync={this._loadAssetsAsync}
                onFinish={() => this.setState({isReady: true})}
                onError={(error) => console.log('app js: ', error)}
            />)
        }
        return (
            <Root>
                <RootNav uriPrefix={store.prefix} />
            </Root>
        )
    }
}

Geocoder.init(Config.google_maps_key);

编辑： 进行以下建议的更改后：-将资产的导入从更改import * as Asset from 'expo-asset';为import { Asset } from 'expo-asset'; -我现在收到此错误，这与我最初写的有关-的错误略有不同TypeError: asset.downloadAsync is not a function. (In 'asset.downloadAsync()', 'asset.downloadAsync' is undefined)。

标签： javascriptreactjsreact-nativeexpo

解决方案

似乎这应该只是import { Asset } from "expo-asset";代替import * as Asset from 'expo-asset';.

我发现了这一点，因为该import语句看起来很奇怪，所以我将您的 App.js 复制到了新的 create-react-native-app 安装中，添加了一些依赖项并注释掉了看起来不相关的位或对不相关文件的引用t张贴在这里。我收到了TypeError: Asset.fromModule is not a function. (In 'Asset.fromModule(image)', 'Asset.fromModule' is undefined)警告，更改了导入行，并加载了应用程序（它没有做太多，但有这么多的注释掉是预期的）。

该import语句很容易意外出错而不会在导入行上实际生成错误，可能值得刷新as使用它时的工作原理，请参阅MDN 上的文档

推荐阅读