android - url 没有显示为 android React Native

Question

我正在使用 <Image>和 <ImageBackground>与 source:{{ uri: url }}在我的 React Native 项目中。

但问题是图片没有在里面显示 Android模拟器(但是 IOS 模拟器没问题)

这是我的组件

import React from 'react'
import {
  Text, StyleSheet, ImageBackground, Image,
} from 'react-native'

import { Header } from 'react-navigation'
import { dimens } from '../../../services/variables'

const CustomHeader = ({ bgSrc }) => (
  <ImageBackground
    source={
        bgSrc
          ? { uri: bgSrc }
          : require('../../../assets/images/placeholder_image_bg_wide.png')
      }
    style={styles.header}
  >
    <Text style={styles.description}>First element</Text>
    <Image source={{ uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg' }} style={{ width: 200, height: 45, backgroundColor: 'red' }} />
    <Text style={styles.description}>Second element</Text>
    <Image source={{ uri: 'http://i.vimeocdn.com/portrait/58832_300x300.jpg' }} style={{ width: 200, height: 45 }} />
    <Text style={styles.title}>Last element 1</Text>
  </ImageBackground>
)

export default CustomHeader

const styles = StyleSheet.create({
  header: {
    minHeight: Header.HEIGHT,
    height: dimens.header.height,
    marginTop: dimens.header.marginTop,
    paddingLeft: dimens.header.paddingLeft,
    paddingBottom: dimens.header.paddingBottom,
    backgroundColor: 'blue',
    flexDirection: 'column-reverse',
  },
  title: {
    ...dimens.header.title,
  },
  description: {
    ...dimens.header.description,
  },
})

我也已经在 AndroidManifest.xml 中添加了权限

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

这是我的两个模拟器的图像

您将在 IOS 上看到模拟器 <Image>显示正确但不在 Android 上没有显示图像(http 和 https )

那么我该如何解决这些问题并使 Android 模拟器正常工作，谢谢!

Answer 1

我之前在另一个问题中说过 https://stackoverflow.com/a/71263771/8826164但是 Image 组件有一个问题是，如果第一次使用 source={{uri : 'some link'}} 初始化组件，它可能无法工作(至少在我获取图像时对我来说不是来自 Firebase 存储的 HTTPS URL)。诀窍是你必须触发对源 Prop 的更改，就像首先你需要保留source 为 source={undefined}，然后更改为 source={{uri : 'some link'}}。而且您似乎对 uri 进行了硬编码 URL，因此您可能会遇到与我相同的问题