React Native - Immagini

In questo capitolo, capiremo come lavorare con le immagini in React Native.

Aggiunta di immagini

Creiamo una nuova cartella img dentro il srccartella. Aggiungeremo la nostra immagine (myImage.png) all'interno di questa cartella.

Mostreremo le immagini nella schermata principale.

App.js

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

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

È possibile accedere all'immagine locale utilizzando la seguente sintassi.

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

Produzione

Densità dello schermo

React Native offre un modo per ottimizzare le immagini per diversi dispositivi che utilizzano @2x, @3xsuffisso. L'app caricherà solo l'immagine necessaria per una particolare densità dello schermo.

I seguenti saranno i nomi dell'immagine all'interno del file img cartella.

[email protected]
[email protected]

Immagini di rete

Quando si utilizzano immagini di rete, invece di require, abbiamo bisogno di sourceproprietà. Si consiglia di definire il filewidth e il height per le immagini di rete.

App.js

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

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

image_example.js

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

const ImagesExample = () => (
   <Image source = {{uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'}}
   style = {{ width: 200, height: 200 }}
   />
)
export default ImagesExample

Produzione