React Native

Learn once, write anywhere.

Formateur: Fabio Ginja

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.

Liens:

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-cli

expo init myNewProject
cd myNewProject
expo start

expo 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.

React Native

Learn once, write anywhere.

Présentation

Présentation

Structure

Applications

Installation

Expo

Premiers pas

JSX, Class, State...

Style

Composants Principaux

FlatList

SectionList

react-native-community

React Native

More from Fabio Ginja