React Native
Learn once, write anywhere.
Formateur: Fabio Ginja
Présentation
Présentation
React Native nous permet des applications natives pour android et ios en utilisant les mêmes principes que React.
Cela nous permet d'écrire notre code en javascript, ce dernier sera ensuite converti dans un composant natif.
Aujourd'hui, la librairie de react native a évolué pour nous permettre de développer des applications pour Windows, macOS, ou encore pour le web.
Structure
La structure de l'application quasi identique à une application web.
Applications
Quelques applications développés avec React Native:
Installation
Expo
Expo est un framework qui nous fournit des outils afin de nous aider dans le développement d'une application React Native. Pour l'installer, il faut avoir node préalablement installé sur sa machine, puis écrire dans le terminal:
Une fois expo installé, on va créer un nouveau projet, et pouvoir le lancer comme suit:
npm install --global expo-cliexpo init myNewProject
cd myNewProject
expo startexpo init -> créer un nouveau projet
cd -> pour change directory permet de naviguer dans un répertoire
expo start -> pour lancer le projet courant
Lien vers la documentation officielle
Premiers pas
JSX, Class, State...
Tout les concepts que vous avez appris avec react vous être applicable ici:
- on écrit du JSX
- on peut créer un functional component / class component
- on utilise le state (useState / this.setState ) de la même manière
- le cycle de vie est le même
- on utilise du css-in-js
- on a accès au context
Ce qui change:
- on écrit plus de l'html-like mais on va utiliser des composant de react-native
- on va utiliser des librairies différentes (ex: la navigation)
Style
Avec react-native, on va penser en termes de vues (View). Une View est un bloc (que l'on peut comparer à une div en html). La balise <Text> est comparable à la balise html <p>.
On remarquera également l'utilisation de flexbox pour le style. Il est impératif de bien maîtriser ce concept.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Hello World!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});Composants Principaux
Les principaux composant que l'on utilisera le plus sont les suivants: View, ScrollView, Text, TextInput, Image...
import React from 'react';
import { View, Text, Image, ScrollView, TextInput } from 'react-native';
const App = () => {
return (
<ScrollView>
<Text>Some text</Text>
<View>
<Text>Some more text</Text>
<Image
source={{uri: 'https://reactnative.dev/docs/assets/p_cat2.png'}}
style={{width: 200, height: 200}}
/>
</View>
<TextInput
defaultValue="You can type in me"
/>
</ScrollView>
);
}
export default App;FlatList
Si on doit itérer à travers une liste d'éléments, on utilisera généralement FlatList ou SectionList. L'avantage de FlatList est qu'il ne fait de render que des elements present à l'écran, optimisant ainsi le chargement de la liste.
<FlatList
data={[
{key: 'Devin'},
{key: 'Dan'},
{key: 'Dominic'},
{key: 'Jackson'},
{key: 'James'},
{key: 'Joel'},
{key: 'John'},
{key: 'Jillian'},
{key: 'Jimmy'},
{key: 'Julie'},
]}
renderItem={({item}) => <Text>{item.key}</Text>}
/>FlatList a besoin de deux props pour fonctionner correctement: data et renderItem.
SectionList
Si en revanche, on veut afficher une liste ordonnée avec un titre par section, on utilisera plutôt SectionList:
<SectionList
sections={[
{title: 'D', data: ['Devin', 'Dan', 'Dominic']},
{title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
]}
renderItem={({item}) => <Text>{item}</Text>}
renderSectionHeader={({section}) => <Text>{section.title}</Text>}
keyExtractor={(item, index) => index}
/>SectionList a besoin de quatres props pour fonctionner correctement: sections (liste nos différentes sections ainsi que ses données), renderItem, renderSectionHeader (rendu des headers de sections) et keyExtractor.