React Native — Изображения

В этой главе мы поймем, как работать с изображениями в React Native.

Добавление изображения

Давайте создадим новую папку img внутри папки src . Мы добавим наше изображение ( myImage.png ) в эту папку.

Мы будем показывать изображения на главном экране.

App.js

import React from 'react';
import ImagesExample from './ImagesExample.js'

const App = () => {
   return (
      <ImagesExample />
   )
}
export default App

Локальное изображение может быть доступно с использованием следующего синтаксиса.

image_example.js

import React, { Component } from 'react'
import { Image } from 'react-native'

const ImagesExample = () => (
   <Image source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')} />
)
export default ImagesExample

Выход

Плотность экрана

React Native предлагает способ оптимизации изображений для различных устройств с использованием суффикса @ 2x, @ 3x . Приложение загрузит только изображение, необходимое для определенной плотности экрана.

Ниже будут имена изображений в папке img .

my-image@2x.jpg
my-image@3x.jpg

Сетевые изображения

При использовании сетевых образов, вместо require , нам нужно свойство source . Рекомендуется определить ширину и высоту для сетевых изображений.