<img/>网址未针对android React Native显示

时间:2019-05-12 19:27:33

标签: android react-native

我在React Native项目中将<Image><ImageBackground>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" />

这是我两个模拟器的图像 enter image description here

您会看到在IOS模拟器<Image>上正确显示,但在Android上没有显示(httphttps都没有图像)

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

0 个答案:

没有答案