Vai al blog

React Native per creare app native multipiattaforma

di lettura
Monica Langella
Articolo scritto in collaborazione con:
Paolo IariaNicolò Sordoni
thumbnail

React Native è un framework sviluppato da Facebook per migliorare l’esperienza d’uso della sua app mobile. Creato inizialmente per disegnare l’interfaccia utente sui soli dispositivi iOS, oggi consente di realizzare delle applicazioni sia iOS che Android.
Solo recentemente Windows ha rilasciato la libreria react-native-windows che permette lo sviluppo anche per la piattaforma Windows (mobile).

La caratteristica più importante di React Native è che, essendo basato su React, quindi JavaScript, permette di realizzare un’applicazione nativa utilizzando strumenti e linguaggi del mondo web.
A differenza degli altri framework ibridi, React Native non usa le WebView, ma mappa i componenti web in componenti nativi, perciò le app che si realizzano sono vere e proprie app native.

Per iniziare a creare un’interfaccia con React Native, è buona norma scomporla in più componenti concettuali, che a loro volta devono essere divisi in altri componenti sempre più piccoli. Questo processo dovrebbe continuare fino a quando i componenti più piccoli individuati hanno dimensioni tali da non poter più essere suddivisi.
Con questa tecnica i componenti definiti sono facilmente riutilizzabili; lo stile e il comportamento vengono specificati una sola volta e il componente può essere importato ovunque serva.

In React Native potrebbe essere necessario importare delle librerie indipendenti, per riuscire a sfruttare alcune funzionalità. Tra le varie librerie di navigazione disponibili, quella che ormai è diventata lo standard di fatto è React Navigation. Scritta completamente in JavaScript, con React Navigation la definizione delle rotte risulta essere semplice. Ad esempio con createStackNavigator si definisce la navigazione tra le schermate, mantenendo lo standard iOS (entra dalla destra) e Android (sale dal basso) per i quali l’ultima view è caricata al top dello stack di navigazione.
Caratteristica fondamentale di questa libreria è che la definizione dei deep linking, ossia di impostare la nostra app in modo tale da aprirla con URI esterni, in view prestabilite, con percorsi associati e salti di navigazione, è naturale e fluida.

Semplice esempio con React Navigation

Supponiamo di voler definire un’app con una tabBar con tre icone Home, Settings e Contacts.

 

 

Con createStackNavigator viene definita la navigazione a stack, separatamente per ogni tab della tabBar:

const HomeStack = createStackNavigator({
Home: { screen: HomeScreen },
Details: { screen: DetailsScreen },
 });
 const SettingsStack = createStackNavigator({
 Settings: { screen: SettingsScreen },
 Details: { screen: InfoScreen },
 });

const ContactsStack = createStackNavigator({
 Contacts: { screen: ContactScreen },
 });

La completa navigazione è definita specificando per ogni tab lo stack di navigazione definito e definendo colori e icone per ogni tab, così come segue:

 

export default createAppContainer(
 createBottomTabNavigator(
 {
 Home: { screen: HomeStack },
 Settings: { screen: SettingsStack },
 Contacts: { screen: ContactsStack}
 },
 {
 defaultNavigationOptions: ({ navigation }) => ({
 tabBarIcon: ({ focused, tintColor }) => {
 const { routeName } = navigation.state;
 let iconName;
 if (routeName === 'Home') {
 iconName = `ios-information-circle${focused ? '' : '-outline'}`;
 } else if (routeName === 'Settings') {
 iconName = 'ios-settings';
 } else if (routeName === 'Contacts') {
 iconName = 'ios-at';
 }
 return ; <Ionicons name={iconName} size={25} color={tintColor} />;
 },
 }),
 tabBarOptions: {
 activeTintColor: 'orange',
 inactiveTintColor: 'gray',
 },
 }
 )
 );

 

Anche le classi createBottomTabNavigator e createAppContainer sono definite nella libreria React Navigation.

React Native, anche secondo la nostra esperienza nelle progettazione di diverse app, risulta essere uno strumento comodo per lo sviluppo di app native, a patto di utilizzare componenti grafici che siano coerenti con le linee guida di design tipiche di ciascuna piattaforma. La realizzazione di interfacce complesse, che richiedono la definizione di componenti personalizzati, risulta più problematica. In tali circostanze risultano indispensabili competenze di sviluppo nativo, al fine di ovviare ai limiti imposti dall’utilizzo esclusivo degli elementi del framework.

Monica Langella
Scritto da
Monica Langella
In Antreem si occupa del mondo del front end come sviluppatrice, dove la cura dei particolari e la funzionalità sono il cuore del lavoro. L’innata passione per l’Informatica continua a spingerla a perlustrare i molti aspetti di questo settore in continua evoluzione.