React Native - Images

Dans ce chapitre, nous allons comprendre comment travailler avec des images dans React Native.

Ajout d'une image

Laissez-nous créer un nouveau dossier img à l'intérieur de srcdossier. Nous ajouterons notre image (myImage.png) dans ce dossier.

Nous montrerons des images sur l'écran d'accueil.

App.js

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

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

L'image locale est accessible en utilisant la syntaxe suivante.

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

Production

Densité d'écran

React Native offre un moyen d'optimiser les images pour différents appareils en utilisant @2x, @3xsuffixe. L'application ne chargera que l'image nécessaire pour une densité d'écran particulière.

Voici les noms de l'image à l'intérieur du img dossier.

[email protected]
[email protected]

Images réseau

Lorsque vous utilisez des images réseau, au lieu de require, nous avons besoin du sourcepropriété. Il est recommandé de définir lewidth et le height pour les images réseau.

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

Production