Question

我正在尝试将图像显示在我的组件文件夹之一中。当我刷新模拟器时，图像没有显示，但没有损坏。有人知道为什么吗？ **我尝试过的另一种解决方案是将其作为本地文件调用，但是它中断了，并且我收到一条消息，指出该特定路径不存在。我确保在页面顶部导入了Image。不知道为什么会这样。

render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Image source={{uri: 'https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2011/08/23/23827615-simpson_homer_head'}}></Image>
        <Text>Name: Homer Simpson</Text>
        <Text>Hometown: Springfield </Text>
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate("Home")}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}
export default BioScreen;

在此处输入代码

Answer 1

在React native中，当您使用URI加载远程图像时，您需要向图像组件显式提供height和width，否则它将设置height和{{ 1}}至width，因此您所要做的就是提供图像组件样式的高度和宽度。

Answer 2

为图像样式提供高度和宽度

import React, { Component } from 'react';
import { AppRegistry, View, Image,Text } from 'react-native';

export default class DisplayAnImage extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
         <Image style={{width:50, height: 60}} source={{uri: 'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?cs=srgb&dl=beauty-bloom-blue-67636.jpg&fm=jpg'}}></Image>
        <Text>Name: Homer Simpson</Text>
        <Text>Hometown: Springfield </Text>
      </View>
    );
  }
}

该图像未显示在React Native的配置文件页面中

2 个答案: