App iOS con React : Creare un Layout System Nativo

App iOS con React : Creare un Layout System Nativo
by Janeth Kent Date: 09-12-2015 iOS React sviluppo app layout React Native

Se hai lavorato con le tecnologie web per un pò, saltare a React Native ti risulterà abbastanza semplice, soprattutto se hai familiarità con ES6.

Se poi conosci NPM, ti basterà seguire le istruzioni presenti nel sito ufficiale, per installare l'ambiente di sviluppo.

Il sistema di layout è un concetto fondamentale che deve essere padroneggiato al fine di creare grandi layout e interfacce utente.

React Native usa Flexbox, che ci aiuta nel momento in cui dobiamo adattare i nostri componenti a vari dispositivi e a schermi di dimensioni diverse.

Immaginiamo di voler creare una nuova applicazione: prima di tutto, abbiamo bisogno di eseguire il seguente comando nel nostro terminale.

$ react-native init ReactLayouts

Questo comando genererà un nuovo progetto.

Ora, aprimo Open ReactLayouts.xcodeproj in Xcode e facciamo eseguire la app in un simulatore.

Si dovrebbe vedere qualcosa di simile:

Possiamo cominciare a costruire la nostra app.

Capire colonne e righe

Quando usiamo FlexBox, possiamo organizzare i figli di un contenitore in due direzioni, verticalmente o orizzontalmente.

L' impostazione predefinita, prevede che tutti i figli siano disposti verticalmente. La direzione della flessione, la flexDirection , determina una colonna. Se vogliamo che i figli del nostro contenitore siano orientati verso destra, e quindi costrituire una riga, dobbiamo cambiare la direzione della proprietà flexDirection.

Proviamo a creare una classia barra degli strumenti nella prima tab, con un tasto a destra, uno a sinistra e un titolo centrato.

Per farlo, bisogna aggiungere il seguente codice al file index.ios.js:

'use strict';    
var React = require('react-native'); 
var {   
 AppRegistry,    
 StyleSheet,    
 Text,   
 View,   
 Component  
} = React;      
class ReactLayouts extends Component{     
			 render() {          
return (            
 <View>                  
   <View style={styles.toolbar}>                      
     <Text style={styles.toolbarButton}>Add</Text>                      
     <Text style={styles.toolbarTitle}>This is the title</Text>                       
     <Text style={styles.toolbarButton}>Like</Text>                  
   </View>              
 </View>          
);      
}  
}     
 var styles = StyleSheet.create({    
});        
AppRegistry.registerComponent('ReactLayouts', () => ReactLayouts);

Come si può vedere, all'interno del metodo di rendering abbiamo un contenitore con con uno stile chiamato "toolbar". All'interno di questo contenitore sono presenti tre diversi contenitori di testo.

Se a questo punto provassimo ad aggiornare la nostra applicazione, vedremo che tutti e tre i testi sono visualizzati in verticale uno dopo l'altro.

Ovviamente perchè abbia l'aspetto di una vera e propria barra di navigazione, tale testo dovrebbe essere posizionato orizontalmente e il titolo dovrebbe adattarsi alla larghezza del dispositivo.

Lavoriamo, quindi, come prima accennato, sulla proprietá flexDirection.

var styles = StyleSheet.create({      
toolbar:{          
backgroundColor:'#81c04d',          
paddingTop:30,          
paddingBottom:10,          
flexDirection:'row'    //Step 1      
},      
toolbarButton:{          
width: 50,            //Step 2          
color:'#fff',         
textAlign:'center'      
},      
toolbarTitle:{          
color:'#fff',          
textAlign:'center',          
fontWeight:'bold',          
flex:1                //Step 3      
}  
});

 

1. Cambiamo la direzione al contenitore padre: flexDirection:'row'  

2. Impostiamo la larghezza dei pulsanti. Questo passaggio non è strettamente necessario, ma se non si imposta una larghezza fissa, verrà utilizzata la larghezza predefinita del testo.

3. Abbiamo reso il titolo flessibile, flex:1, ció significa che il contenitore userà tutto lo spazio disponibile.

 

Ecco il risultato:

Andiamo aventi e proviamo la visualizzazione landscape con ⌘ + Freccia Sinistra/Destra, per vedere come il titolo si adatta allo schermo.

Ora, dobbiamo aggiungere un contenitore dopo la barra dei contenuti, che prenda tutto lo spazio verticale disponibile.

Per farlo, dobbiamo lavorare sul metodo render.

render() {      
return (          
<View style={styles.mainContainer}>     //Step 1              
<View style={styles.toolbar}>                  
   ...              
</View>             
 <View style={styles.content}>            //Step 2                 
  <Text>This is the content</Text>             
 </View>         
 </View>      
);  
}

1. Aggiungiamo una nuova definizione di stile al contenitore principale, dobbiamo far si che il contenitore si espanda a pieno schermo.

2. Definire il nuovo contenuto con testo.

Infine, diamo un pò di style alla nostra app:

var styles = StyleSheet.create({     
 ...          
mainContainer:{          flex:1                  //Step 1      
},      
content:{         
backgroundColor:'#ebeef0',          
flex:1                //Step 2      
}  
});

Il contenitore principale deve essere flessibile, come quello che conterrà il testo, al quale aggiungeremo uno sfondo colorato.

Questo il risultato:

 

articolo originale di  su moduscreate.com

 
by Janeth Kent Date: 09-12-2015 iOS React sviluppo app layout React Native visite : 3993  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Articoli correlati

Come usare i codici segreti di Netflix nel 2020: Codici Cheat per fan di serie e film

Potresti aver sentito parlare dei codici cheat che sbloccano tesori sconosciuti nei giochi per computer. Ma se sei qualcuno che ama perdere tempo nel fare maratone di serie, allora puoi…

Le migliori librerie JavaScript del 2018

Dal momento che Javascript si è rivelato il linguaggio di programmazione più popolare e ampiamente utilizzato nel 2018, l'ecosistema che si sviluppa intorno ad esso sta cominciando a diventare importante. JavaScript…

Nelle profondità della rete: il deep web

Finita l'età dell'innocenza, terminato il momento in cui smettiamo di credere che tutto ciò che si può trovare sulla rete lo restituisca papà google, inizia la vera scoperta. Tutti i siti,…

Nuovo look per Gmail: tutti i dettagli

Google due giorni fa ha annunciato il redesign di Gmail volto a facilitare l'organizzazione del numero crescente di mail che quotidianamente riceviamo ed a fronteggiare nuovi servizi quali Mailbox. L’interfaccia a…

Cambio di look per l'Apple Store e pagamenti con PayPal

Apple Store cambia look. Il negozio online di Apple si rinnova completamente e presentando sul mercato una novità per gli acquisti via web. Con il nuovo design dell’Apple Store, sempre pulito, lineare,…