为什么在expo build:android之后apk上没有显示图像?(反应本机)

问题描述

我创建了一个应用程序(使用React Native Expo)，其中包含一些图像，例如:

I created an app (using React Native Expo) that has some images like:

<图片来源= {require('../assets/facebook_button.png')}/>

图像位于资产目录中，我可以使用 npm publish 或 npm start 功能来查看它们.

The images are in the assets directory and I can see them using the npm publish or the npm start functionalities.

问题是使用 exp build:android 构建应用程序时，现在apk 不显示静态图片(但我正在从正在显示互联网).

The problem is when building the app with exp build:android, now the apk is not showing the static images (but some other images I'm loading from the Internet are being showed).

这是我的app.json:

This is my app.json:

{
  "expo": {
    "name": "my-interesting-app",
    "description": "My Interesting App",
    "slug": "my-interesting-app",
    "privacy": "public",
    "sdkVersion": "29.0.0",
    "platforms": ["ios", "android"],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*",
      "assets/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.myinteresting.myinterestingapp"
    },
    "android": {
      "package": "com.myinteresting.myinterestingapp"
    },

  }
}

感谢您的帮助

推荐答案

尝试在加载之前缓存图像.

Try to cache the image before loading.

import React from 'react';
import { Image, Text, View } from 'react-native';
import { Asset, AppLoading } from 'expo';

export default class App extends React.Component {
  state = {
    isReady: false,
  };

  render() {
    if (!this.state.isReady) {
      return (
        <AppLoading
          startAsync={() => this._cacheResourcesAsync()}
          onFinish={() => this.setState({ isReady: true })}
          onError={console.warn}
        />
      );
    }

    return (
      <View style={{ flex: 1 }}>
        <Image source={require('./assets/images/expo-icon.png')} />
        <Image source={require('./assets/images/slack-icon.png')} />
      </View>
    );
  }

  async _cacheResourcesAsync() {
    return Asset.loadAsync([
      require('./assets/images/expo-icon.png'),
      require('./assets/images/slack-icon.png'),
    ]);
  }
}

参考文献:

• https://docs.expo.io/versions/latest/sdk/app-loading.html#app-loading
• https://docs.expo.io/versions/latest/sdk/asset.html#expoassetloadasyncmodules

这篇关于为什么在expo build:android之后apk上没有显示图像?(反应本机)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！