Réact Native (Notes en Vrac)

Concepts clé :

Le composant ( la fonction-composant):

- sous l'aspect d'une fonction :

import React from 'react';
import { Text } from 'react-native';

const Cat = () => {
return <Text> Hello World </Text>;
}

export default Cat

- sous l'aspect d'une classe : (approche dépassée !)

import react, { Component} from 'react';

class Cat extends Component {
     render() {
        return <Text>Hello world </Text>;
       }

export default Cat;

Les propriétés : props

Les propriétés permettent de personnaliser les composants React lors de leur initialisation. Ces valeurs ne peuvent plus être modifiée ensuite.

const Cat = (props) => {
return <Text> Hello { props.name } </Text>;
}

L'utilisation du composant sera de la forme < cat name="World" />

Certains composants "système" ont eux-aussi des propriétés: ex le composant "image" dispose des propriétés "source" et "style" d'où la syntaxe lorsqu'on les utilise : <image source={{"url"}} style={{"width:200px, height:200px"}} />

Remarquez les doubles accolades {{ }} entourant la largeur et la hauteur du style. Dans JSX, les valeurs JavaScript sont référencées avec {}. C'est pratique si vous transmettez autre chose qu'une chaîne comme valeur de propriété, comme un tableau ou un nombre : <Cat food={["fish", "kibble"]} age={2} />. Cependant, les objets JS sont également désignés par des accolades : {width : 200, height : 200}. Par conséquent, pour passer un objet JS dans JSX, vous devez envelopper l'objet dans une autre paire d'accolades : {{width : 200, height : 200}}

Gestion des Interactions de l'utilisateur

Text :

Le composant "Text" prend en charge l'imbrication mais aussi le style (par la props "style") et la gestion tactile.(par la props "onPress")

TextInput :

TextInput est un composant principal qui permet à l'utilisateur de saisir du texte. Il dispose de la props "onChangeText" qui a pour paramètre la fonction à appeler chaque fois que le texte est modifié, et de la props "onSubmitEditing" qui a pour paramètre la fonction à appeler lorsque le texte est soumis. Pour tout savoir : https://blog.logrocket.com/complete-guide-textinput-react-native/

Button :

Un bouton dispose de 2 props obligatoires :

onPress = la fonction appelée (le callback) ;
title = chaîne ce caractère ;

et 4 props optionnelles ( disabled = booléen .. cf ici )

Toucher :

voir ICI

Le bouton
Les "toucher"

Cliquez sur le bouton pour copier le code
dans le presse papier

    
            import React, { Component } from 'react';
            import { Button, StyleSheet, View } from 'react-native';
            const ButtonBasics = () => {
                return (
                  <View style={styles.container}>
                    <View style={styles.buttonContainer}>
                      <Button
                        onPress={() => {
                          alert('You tapped the button!');
                        }}
                        title="Press Me"
                      />
                    </View>
                    <View style={styles.buttonContainer}>
                      <Button
                         onPress={() => {
                           alert('You tapped the button!');
                         }}
                        title="Press Me (B2)"
                        color="#841584"
                      />
                    </View>
                    <View style={styles.alternativeLayoutButtonContainer}>
                      <Button
                        onPress={() => {
                           alert('You tapped the button!');
                           }}
                        title="This looks great!"
                      />
                      <Button
                           onPress={() => {
                                      alert('You tapped the button!');
                                    }}
                        title="OK!"
                        color="#841584"
                      />
                    </View>
                  </View>
                );
            }
            const styles = StyleSheet.create({
              container: {
               flex: 1,
               justifyContent: 'center',
              },
              buttonContainer: {
                margin: 20
              },
              alternativeLayoutButtonContainer: {
                margin: 20,
                flexDirection: 'row',
                justifyContent: 'space-between'
              }
            });
            export default ButtonBasics;

Cliquez sur le bouton pour copier le code
dans le presse papier

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';

const styles = StyleSheet.create({
container: {
    paddingTop: 60,
    alignItems: 'center'
},
button: {
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196F3'
},
buttonText: {
    textAlign: 'center',
    padding: 20,
    color: 'white'
}
});

export default Touchables

Le style :

les composants du core React-native ont une props "style".
Les noms et valeurs de "style" correspondent généralement au fonctionnement de CSS sur le Web. Au fur et à mesure qu'un composant gagne en complexité, il est souvent plus simple d'utiliser "StyleSheet.create" pour définir plusieurs styles en un seul endroit du code.

https://learntutorials.net/fr/react-native/topic/7757/coiffant

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

const LotsOfStyles = () => {
    return (
      <View style={styles.container}>
        <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>
    );
};

const styles = StyleSheet.create({
container: {
    marginTop: 50,
},
bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
},
red: {
    color: 'red',
},
});

export default LotsOfStyles;

La flex tech https://reactnative.dev/docs/flexbox#flex-wrap

Gestion du scroll

Le composant ScrollView :

Par défaut, le scroll est vertical. Pour qu'il soit horizontal, il faut affecter la valeur true à la props horizontal de scrollView (cf code ci-dessous). Il peut également être utile de définir à true la prop pagingEnabled pour que le scroll s'arrète "proprement à chaque limite de page".
Veiller à définir la largeur (resp la hauteur) du composant view définissant chacune des pages à la largeur (resp. la hauteur) de l'écran (cf code ci-dessous).

Le conteneur "scrollView" dispose de 27 props (voir ICI).
Dans le code ci-dessous, les scroll horizontaux et verticaux sont définis sur le 1^er "écran".

/* récupération des dimensions de l'écran avec le composant Dimension */
const screenWidth= Dimensions.get("window").width;
const screenHeight = Dimensions.get("screen").height;

const styles = StyleSheet.create({
.......
page:{
     width: screenWidth, /* pour le défilement horizontal */
     height: screenHeight - 120,
     backgroundColor: 'cornsilk',
     borderWidth:1,
     borderRadius:10,
},
....
});

Le composant FlatList :

Le composant FlatList affiche des données structurées similaires dans une liste déroulante.

Il a 2 props obligatoires :

data :la source des données à afficher ( ie : les items sous la forme d'un tableau associatif de données)
renderItem : fonction (généralement anonyme) qui affiche les items un par un

                    <FlatList
                        data={ [
                            {"num" : "44" , "name" : "alain", "course":"info"},
                            {"num" : "46" , "name" : "pierre", "course":"info"},

                        ]}
                        renderItem={({item}) =>
                              <Text>{item.num} {item.name}   {item.course}</Text>
                              }
                    />

Sa props facultative "ItemSeparatorComponent" permet de gérer la séparation entre les différents affichages successifs des items du tableau data