Изображение 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

Я думаю, что вы забыли добавить размеры для вашего изображения. Документы говорят здесь , что вы должны предоставить их при использовании сетевых изображений и изображений. Я приложил скриншот результата, теперь он работает.

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

Приветствие.