时间戳

首页 > 解决方案 > url 未显示 android React Native

android - url 未显示 android React Native

问题描述

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

但问题是模拟器内没有显示图像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 模拟器正常工作，谢谢！

标签： androidreact-native

解决方案

我之前在另一个问题 https://stackoverflow.com/a/71263771/8826164中说过这一点， 但是 Image 组件存在一个问题是，如果第一次用source={{uri : 'some link'}}它初始化组件可能不起作用（至少当我从 Firebase 存储中的 HTTPS URL 获取图像）。诀窍是您必须触发对 source 道具的更改，例如首先需要将 source 保留为source={undefined}然后更改为source={{uri : 'some link'}}. 而且您似乎有硬编码的 URL uri，因此您可能会遇到与我相同的问题

推荐阅读