React Navigation 1

React Navigation¹ permette all’utente di sfogliare le schermate dell’applicazione (dette anche screen).

Come al solito, dopo aver creato il template del progetto, si devono installare le dipendenze con npm (purtroppo queste dipendenze non sono gestite automaticamente da package.json, chissà perchè!?)

$ nvm use node
$ npx react-native init progetto
$ cd progetto

$ npm install @react-navigation/native @react-navigation/bottom-tabs
$ npm install react-native-screens
$ npm install react-native-safe-area-context

(Android) Scegliere tra linguaggio Java e Kotlin

import android.os.Bundle;
//...
@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

// un ultimo import da aggiungere in fondo
import android.os.Bundle;

// ...
class MainActivity: ReactActivity() {
  // ...  
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)  
  }  
  // ...
}

Questo allegato è il codice sorgente utile per testare l’applicazione

Analizzando il codice necessario nel file ./src/App.js si può osservare la parte più rilevante, con le seguenti modifiche:

• l’elemento contenitore NavigationContainer (riga 8)
• l’oggetto Scheda (riga 5)
• Gli attributi dell’oggetto Scheda:
  • Navigaror (riga 9, per configurare tutte le schermate)
  • Screen (riga 10, per il contenuto di ogni schermata)
    • name (riga 11) prop che contiene il testo della scheda
    • component (riga 11) il nome del componente da visualizzare (non usare funzioni inline in questa prop)

import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
..
const App: () => Node = () => {
  const Scheda = createBottomTabNavigator();
  ...
  return (
    <NavigationContainer>
      <Scheda.Navigator>
        <Scheda.Screen name="vai a home" component={Homepage} />
        <Scheda.Screen name="vai a settings" component={Settingspage} />
      </Scheda.Navigator>
    </NavigationContainer>
  );
};

Attenzione: Non si dovrebbe passare un component descritto tramite una funzione inline, vediamo un esempio errato:

<Scheda.Screen name="vai a home" component={() => <Homepage/>} />

Sul componente Scheda.Navigator si può usare una prop come questa

<Scheda.Navigator initialRouteName="Homepage">

il prossimo articolo ripasserà come passare props agli screen grazie al Context Hooks²

1. https://reactnavigation.org [↩]
2. https://www.cancellino.org/2023/01/context-hooks/ [↩]