ios - 某些图像未显示在 react-native-fastimage 中

Question

我正在使用 react-native 制作一个 iOS 应用。

但是我在 react-native-fastimage 中遇到了一些问题图书馆。

首先，下面的代码可以正常显示:

<FastImage
   style={s.image}
   source={{
      uri: 'https://unsplash.it/400/400?image=1',
      priority: FastImage.priority.normal,
   }}
   resizeMode={FastImage.resizeMode.stretch}
/>

但是，这没有显示:

<FastImage
   style={s.image}
   source={{
      uri: 'https://s3.ap-northeast-2.amazonaws.com/zzim-app-images/intro/180529_1.png',
      headers:{ Authorization: 'someAuthToken' },
      priority: FastImage.priority.high,
   }}
   resizeMode={FastImage.resizeMode.stretch}
/>

为什么我看不到任何图像？我不能从 s3 加载图像吗？

下面是我测试的。

1. 我下载了“https://unsplash.it/400/400?image=1”并上传到 s3，但它没有显示。

2. 我尝试使用 <Image>组件，它的工作原理。问题出在 FastImage 和 S3 Image 上。

3. 我在标题中添加了“Content-Type”，但它仍然没有显示..

4. 我尝试应用不是 s3 图像的其他图像(大尺寸、png、jpeg 等)。它们显示正确。

5. 我尝试重新安装 node_module、初始化项目并删除缓存。但是 s3 的图像仍然没有显示。

不知道是什么问题。请帮帮我..

PS) package.json

{
  "name": "ZzimIos",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@expo/vector-icons": "^6.3.1",
    "native-base": "^2.7.0",
    "prop-types": "^15.6.1",
    "react": "16.4.1",
    "react-native": "^0.56.0",
    "react-native-app-intro-slider": "^0.2.4",
    "react-native-awesome-alerts": "^1.0.6",
    "react-native-blur": "^3.2.2",
    "react-native-carousel-view": "^0.5.1",
    "react-native-fast-image": "^4.0.2",
    "react-native-gifted-chat": "^0.3.0",
    "react-native-keyboard-aware-scroll-view": "^0.4.4",
    "react-native-masonry": "^0.5.0-alpha.1",
    "react-native-navigation": "^2.0.2397",
    "react-native-scalable-image": "^0.2.2",
    "react-native-splash-screen": "^3.0.6",
    "react-native-status-bar-height": "^2.0.0",
    "react-redux": "^5.0.7",
    "recompose": "^0.26.0",
    "redux": "^3.7.2",
    "redux-devtools-extension": "^2.13.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "styled-components": "^3.2.5"
  },
  "devDependencies": {
    "babel-eslint": "^8.0.2",
    "babel-jest": "22.4.3",
    "babel-plugin-module-resolver": "^3.0.0",
    "eslint": "^4.11.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0",
    "eslint-plugin-react-native": "^3.2.1",
    "jest": "22.4.3",
    "react-native-debugger-open": "^0.3.17",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

我也遇到了同样的问题你能从 Fastimage 请求中删除 headers 参数吗

那么您的代码将如下所示:

<FastImage
   style={s.image}
   source={{
      uri: 'https://s3.ap-northeast-2.amazonaws.com/zzim-app-images/intro/180529_1.png',
      priority: FastImage.priority.high,
   }}
   resizeMode={FastImage.resizeMode.stretch}
/>

这对我有用。