为什么在 expo build:android 之后图像没有显示在 apk 上？（反应原生）答案

【问题标题】：Why are images not showing on apk after expo build:android? (React Native)为什么在 expo build:android 之后图像没有显示在 apk 上？（反应原生）
【发布时间】：2019-01-12 03:54:32
【问题描述】：

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

<Image source={require('../assets/facebook_button.png')} />

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

问题是使用exp build:android 构建应用程序时，现在apk 不显示静态图像（但显示了我从互联网加载的其他一些图像）。 p>

这是我的 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"
    },
    
  }
}

感谢您的帮助

【问题讨论】：

您解决了这个问题？我现在也面临同样的情况......
@crazy1337 还没有：/我被卡住了，我决定从服务器获取图像
我能够在本地加载图像。我必须缓存它们，然后显示图像。我在这里添加了一个答案，希望这对你有帮助:)
尝试修复资产在 Android (ExpoKit v31.0.0) 上不可用的问题。我对图像的解决方案是将它们转换为 Base64 字符串。我还没有字体解决方案，无法对它们进行字符串化或通过 http 加载。

标签： reactjs react-native native expo

【解决方案1】：

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

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'),
    ]);
  }
}

参考资料：

【讨论】：