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加载图像吗？

下面是我测试过的

我下载了“ https://unsplash.it/400/400?image=1”并上传到s3，但它也没有显示。
我尝试使用<Image>组件，它可以正常工作。问题出在FastImage和S3 Image。
我在标题中添加了“ Content-Type”，但仍未显示。.
我尝试应用不是s3图像的其他图像（大尺寸，png，jpeg等。）。它们显示正确。
我尝试重新安装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请求中删除标头参数

然后您的代码将如下所示：

<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}
/>

这对我有用。

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

1 个答案: