React Native : gestion de l'UI

Ecole Nationale Supérieure de Cognitique

Baptiste Pesquet

Sommaire

  • Cycle de vie d’un composant
  • Style et positionnement
  • Gestion de la navigation

Cycle de vie d’un composant

Notion de cycle de vie

Les composants RN suivent un cycle de vie bien défini composé d’étapes : montage, rendu, mise à jour, démontage et suppression.

React lifecycle

Méthodes liées au cycle de vie

Les redéfinir permet d’exécuter du code spécifique.

  1. constructor(props) : initialisation des propriétés et de l’état.
  2. render() : renvoi d’un élément React Native.
  3. componentDidMount() : appels asynchrones.
  4. shouldComponentUpdate() : renvoi d’un booléen pour annuler la mise à jour.
  5. componentDidUpdate() : actions après la mise à jour du rendu.

Style et positionnement

Gestion du style

Propriété style pour les composants de base.

Semblable à CSS avec nommage camelCase.

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";

const styles = StyleSheet.create({
  bigblue: {
    color: "blue",
    fontWeight: "bold",
    fontSize: 30,
  },
  red: {
    color: "red",
  },
});

export default class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
      </View>
    );
  }
}

Gestion des dimensions

Deux possibilités :

  • Dimensions fixes
  • Dimensions flexibles

Dimensions fixes

Utile pour les composants qui doivent toujours être affichés à la même taille.

import React, { Component } from "react";
import { View } from "react-native";

export default class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View>
        <View
          style={{ width: 50, height: 50, backgroundColor: "powderblue" }}
        />
        <View style={{ width: 100, height: 100, backgroundColor: "skyblue" }} />
        <View
          style={{ width: 150, height: 150, backgroundColor: "steelblue" }}
        />
      </View>
    );
  }
}

Dimensions flexibles

Les dimensions s’adaptent à l’espace disponible.

flex:1 => espace partagé équitablement entre tous les composants d’un même parent (démo).

import React, { Component } from "react";
import { View } from "react-native";

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1, backgroundColor: "powderblue" }} />
        <View style={{ flex: 2, backgroundColor: "skyblue" }} />
        <View style={{ flex: 3, backgroundColor: "steelblue" }} />
      </View>
    );
  }
}

Flexbox

  • Mode de mise en page pour les éléments situés à l’intérieur d’un conteneur.
  • Objectif : répartir au mieux l’espace disponible.

Flexbox terminology

flexDirection : flux des éléments

column (par défaut), row, column-reverse, row-reverse.

Flex direction

justifyContent : axe principal

Flexbox: justify content

alignItems : axe secondaire

Flexbox: align Items

Gestion de la navigation

React Navigation

  • Composant issu de la communauté des développeurs React Native.
  • Devenu le standard pour les applications multi-vues.

React Navigation logo

Installation de react-navigation

Utiliser expo install au lieu de npm install assure l’installation de versions compatibles avec celle d’Expo.

# Core components and dependencies
expo install @react-navigation/native react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

# StackNavigator dependencies
expo install @react-navigation/stack

# BottomTabNavigator dependencies
expo install @react-navigation/bottom-tabs

# DrawerNavigator dependencies
expo install @react-navigation/drawer

StackNavigator

Principe similaire au web : gestion d’une pile de vues.

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
  • Un objet navigation est automatiquement ajouté aux props des vues gérées par React Navigation.
  • Son API permet de naviguer entre les vues.
// Navigue vers une vue
this.props.navigation.navigate("RouteName");

// Permet d'aller plusieurs fois vers la même vue
this.props.navigation.push("RouteName");

// Revient à la vue précédente
this.props.navigation.goBack();

Passage de paramètres entre vues

// Côté vue appelante
this.props.navigation.navigate("RouteName", {
  /* Objet dont les propriétés constituent les arguments */
  param1: "value1",
  // ...
});

// Côté vue appelée
// La propriété route.params permet de récupérer les paramètres passés à la vue
const { param1 } = this.props.route.params;

En-tête des vues

<MainStack.Navigator
  screenOptions={{
    headerStyle: {
      backgroundColor: "#f4511e",
    },
    headerTintColor: "#fff",
    headerTitleStyle: {
      fontWeight: "bold",
    },
  }}
>
// ...

Vue modale

<RootStack.Navigator mode="modal" headerMode="none">
  <RootStack.Screen
    name="Main"
    component={MainStackScreen}
    options={{ headerShown: false }}
  />
  <RootStack.Screen name="MyModal" component={ModalScreen} />
</RootStack.Navigator>

Exemple récapitulatif

https://github.com/ensc-mobi/StackNavigatorDemo

StackNavigator demo

TabNavigator

Affichage d’onglets en bas de l’écran.

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Fonctionnement identique à celui de la navigation entre les vues d’un StackNavigator.

<Button
  title="Go to Settings"
  onPress={() => navigation.navigate("Settings")}
/>

Affichage de piles (stacks) dans les onglets

const HomeStack = createStackNavigator();
function HomeStackScreen() {
  // Define home stack
}

const SettingsStack = createStackNavigator();
function SettingsStackScreen() {
  // Define settings stack
}

const Tab = createBottomTabNavigator();
function TabScreen() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeStackScreen} />
      <Tab.Screen name="Settings" component={SettingsStackScreen} />
    </Tab.Navigator>
  );
}

Exemple récapitulatif

https://github.com/ensc-mobi/TabNavigatorDemo

BottomTabNavigator demo

Autres possibilités de react-navigation