Learning React-Native

Cos'è React-Native?

React Native è un framework per applicazioni mobile che viene utilizzato principalmente per creare applicazioni per Android, iOS e Web.

Configurazione dell'ambiente

Usare NodeJS

La prima cosa da fare per installare React Native è scaricare NodeJS:

# Using Ubuntu
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

# Using Debian, as root
curl -fsSL https://deb.nodesource.com/setup_14.x | bash -
apt-get install -y nodejs

Per usare React-Native è meglio utilizzare la versione 14.x di NodeJS perchè le ultime versioni danno problemi. Quindi se hai installato una versione > 14.x di NodeJS effettua un downgrade alla versione 14.x.

Downgrade NodeJS

Creare un progetto

Per creare un progetto React-Native la prima cosa da fare è usare il comando expo init:

expo init NuovoProgetto

cd NuovoProgetto
npm start # you can also use: expo start

Per altre informazioni fare riferimento a questo link.

Struttura del progetto

Un progetto React Native ha diversi files, ed è bene conoscere le funzioni di ognuno di essi.

assets/

La cartella assets salva tutti gli asset che stiamo usando in react-native. In questa cartella possiamo aggiungere dei files statici come immagini o fonts.

components/

In questa cartella possiamo creare diversi componenti che vengono usati per "wrappare" i componenti dell'applicazione; questi elementi determineranno il layout finale.

Possiamo suddividere i componenti in diverse categorie:

Atomi: I componenti più piccoli; in questa categoria rientrano elementi come i buttons, titoli, inputs, animazioni, etc. Anche i fonts vengono salvati nella cartella atoms.
Molecole: Sono la composizione di uno o più atoms.
Organismi: La combinazione di più molecole che lavorano insieme in modo da creare interfacce elaborate.
Templates: La collezione di organismi che creeranno un full-page template.

In questa sezione verranno aggiunti nuovi componenti della struttura man mano che essi verranno studiati; per il momento, fare riferimento a questa pagina.

Concetti Fondamentali

View
Text
Image
Button
Touchables
Alert
Per altri componenti, fare riferimento a questo link.

View

In React-Native non sono presenti i classici tag come <div> di HTML, ma abbiamo lo stesso dei componenti "contenitori", che possiamo usare per raggruppare o nominare dei figli:

<View style={styles.container}>
    <Text>Open up App.js to start working on your app!</Text>
    <StatusBar style="auto" />
</View>

Cosa sono gli styles?

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

flex: 1 Indica che questa view è flessibile e può crescre orizzontalmente o verticalmente per riempire degli spazi vuoti. Questo permette alla view di riempire tutto lo schermo.
backgroundColor: '#fff' indica che lo sfondo sarà di colore bianco; per cambiare il colore ci basta cambiare il valore compreso negli apici singoli. Possiamo usare anche dei nomi per indicare i colori: dodgerblue indica un colore preciso.
alignItems: 'center' e justifyContent: 'center' questi due elementi ci permettono di posizionare la nostra view al centro dello schermo. Senza questi due elementi il nostro testo andrebbe a posizionarsi nell'angolo in alto a sinistra.

Safe area

Nei nuovi dispositivi potremmo avere il problema di dover posizionare i nostri elementi all'interno di una safe area, ovvero un'area nella quale siamo sicuri di poter posizionare elementi. Questo perchè il dispositivo potrebbe essere dotato di una notch, che impedirebbe la corretta visualizzazione della view.

Per correggere questo comportamento, ci basta aggiungere SafeAreaView nelle importazioni:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';

Possiamo quindi sostituire View con SafeAreaView nel nostro codice:

<SafeAreaView style={styles.container}>
    <Text>Open up App.js to start working on your app!</Text>
    <StatusBar style="auto" />
</SafeAreaView>

Per sostituire più testo allo stesso momento in Visual Studio Code, ci basta selezionare il testo da sostituire, e premere ctrl+d o cmd+d per sostituire più testo contemporaneamente.

Per uscire dalla modalità multi cursor editing ci basterà premere esc .

Quello che SafeAreaView fa, è semplicemente aggiungere la giusta quantità di padding top per essere sicura che il testo sia visibile.

Text

Per aggiungere del testo all'interno della nostra applicazione, dobbiamo sempre farlo tramite il componente <Text> </Text> .

Props

Possiamo aggiungere dei cosiddetti props ai nostri componenti, che specificano un comportamento; ad esempio, se avessimo un testo molto lungo, e volessimo limitare le linee utilizzate per mostrare questo testo, ci basterebbe usare il prop numberOfLines:

<SafeAreaView style={styles.container}>
      <Text numberOfLines={1}>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </SafeAreaView>

In questo modo questo modo, alla fine della prima linea verranno visualizzati dei puntini sospensivi (...) per indicare che il testo continua, ma non è visualizzato interamente.

Eventi

Possiamo anche impostare un'azione che viene eseguita a seguito di un evento:

<SafeAreaView style={styles.container}>
      <Text numberOfLines={1} onPress={() => console.log("Click rilevato")}>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </SafeAreaView>

Possiamo usare onPress={} per eseguire un'azione quando un componente viene cliccato; possiamo eseguire l'azione in due modi:

Inline

Scriviamo una funzione lambda (inline) che esegue un'azione; questo metodo è utile nel momento in cui l'azione da eseguire è poco complessa, come un alert o un log in console.

funzione separata

export default function App() {
  const handlePress = () => console.log("click rilevato");
    
  return (
    <SafeAreaView style={styles.container}>
      <Text numberOfLines={1} onPress={handlePress} >
          Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

Image

Button

Touchables

Alert

ToDo List

Per creare il profetto digitiamo questo comando; scegliamo il tipo di progetto blank.

$ expo init ToDoList

Creazione di componenti

Per creare un componente non ci basta altro che creare una nuova cartella chiamata components, al cui interno potremo creare i nostri componenti sottoforma di files javascript.

Nel nostro caso, il primo componente da creare è il Task, ovvero un componente grafico che ci permette di visualizzare un task che dobbiamo completare; la sua forma basilare è la seguente:

import react from "react";
import {View, Text, StyleSheet} from 'react-native';

const Task = () => {
    return(
        <View>
            <Text>
                Questo è un task
            </Text>
        </View>
    )
}

/**
 * gli stili grafici del componente
 */
const styles = StyleSheet.create({

});

export default Task;    // in questo modo può essere referenziato in altri files

A noi interessa creare dei Components perchè dobbiamo poter riutilizzare questi componenti in più aree della nostra applicazione; ad esempio, il component Task verrà utilizzato diverse volte per visualizzare più tasks.

Passare argomenti ai components

Per passare degli argomenti (ad esempio del testo da visualizzare), ci basta dire che il nostro Task riceve dei props:

/**
 * 
 * @param {*} props gli argomenti da visualizzare
 * @returns la view
 */
const Task = (props) => {
    return(
        // visualizzo il testo passato come argomento
        <View>
            <Text>
                {props.text}    
            </Text>
        </View>
    )
}

In questo modo, possiamo "inviare" del testo al nostro task dal file App.js:

<View style={styles.items}>
    {/** qui è dove andranno visualizzati i task */}
	<Task text = {'task 1'}/>
    <Task text = {'task 2'}/>
    <Task text = {'task 3'}/>
</View>

Quello che otteniamo è qualcosa del genere:

Stili utili

justifyContent: 'space-between': separa due elementi e li posiziona ai lati estremi dello schermo.
flexDirection: 'row': dispone gli elementi sulla stessa riga (e non in due righe diverse in un'unica colonna).
alignItems: 'center': allinea più elementi al centro dello schermo.

Creare uno stato

import {useState} from 'react';

const [task, setTask] = useState();

task: nome dello stato, lo usiamo per effettuare il track dello stato (in questo caso dell'immissione del reminder)
setTask: la funzione che useremo per impostare lo stato

Usiamo lo stato per le cose che cambiano spesso nella nostra applicazione

follen99/LearningReactNative