React Native con immagini

Le applicazioni per smartphone viste fino ad ora sono dei template dimostrativi, composti da una schermata che non fa quasi nulla. Cosa si può aggiungere? Un’immagine sullo sfondo?

A questo punto si deve decidere quale cosa deve fare la prima applicazione.

Si potrebbe aggiungere un menù che permette di passare da una schermata principale ad un’altra schermata (funzione di navigazione con tab), senza fare niente altro. In futuro verrà aggiunto un articolo per la navigazione (ma non oggi).

Si potrebbe

• aggiungere un’immagine fissa nello sfondo della pagina.
• successivamente sostituire l’immagine fissa, con quella catturata da una fotocamera.

Si può partire da un template molto semplice e aggiungere una cartella src con altre sottocartelle per ora vuote

+ .
+ ── android
+ ── ios
+ ── node_modules
+ ── plugin
+ ── src
|     ├─── asset 
|     ├─── components
|     ├─── containers
|     ├─── hooks
|     ├─── theme
|     └─── App.js

Spostiamo anche il file App.js (originariamente nella radice del progetto) e portiamolo nella cartella src. Questo rende necessario modificare una riga nel file index.js.

 import App from './src/App.js';

Apriamo anche App.js e spostiamo il codice relativo al component Section in un nuovo file con questo percorso. Va copiato (non solo spostato) anche il codice della parte estetica (StyleSheet)

./src/components/Section.js

Questo richiede di aggiungere una riga in più su App.js

import Section from './components/Section.js';

Questo è il codice del file Section.js

import '../asset/immagine.jpg';
import React from 'react';
import type {Node} from 'react';
import {StyleSheet, Image, View} from 'react-native';

const Section = (): Node => {
  return (
    <>
      <Image
        source={require('../asset/immagine.jpg')}
      />
    </> 
  )
}

export default Section;

Si suggerisce di provare a compilarlo come visto nei precedenti articoli