图像uri无法按预期运行-React Native

Question

我正在学习React Native。按照指南，Facebook入门（ https://facebook.github.io/react-native/docs/props）。当我尝试制作一个包含图像的新组件时，有时可以工作，有时则不能。我已经在线阅读了这是由于它们如何加载，React Native不支持动态加载图像。

class CuteImage extends Component {
  render() {

    return (
      <View>
        <Image source={{uri: 'https://cdn1.medicalnewstoday.com/content/images/articles/322/322868/golden-retriever-puppy.jpg'}} />
      </View>
    );
  }
}

export default class ExampleComponent extends Component {
  render() {
    return (
      <View style={{alignItems: 'center', justifyContent: 'center', flex: "1", flexDirection: "column"}}>
        <CuteImage />
      </View>
    );
  }
}

我希望它能很好地工作，因为在“图像组件”教程中，他们做了类似的事情并且已经工作（https://facebook.github.io/react-native/docs/image），但是却抛出了以下错误：

Failed to construct 'Image': Please use the 'new' operator

为什么会这样？动态和静态加载与此有何关系？

Answer 1

我认为您忘记为图像添加尺寸。 文档说here，您在使用网络和数据映像时必须提供它们。 我附上了结果的屏幕截图，现在可以使用。

<View>
    <Image style={{width: 380, height: 340} } source={{uri: 'https://cdn1.medicalnewstoday.com/content/images/articles/322/322868/golden-retriever-puppy.jpg'}} />
</View>

干杯。