Aller au contenu principal


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")

<Text 
          style={
                     styles.item
                     }  
          onPress={
                           getListViewItem( item)
                           }
>
{item.key}
</Text>

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

 

 

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 Touchables = () => { 
    return ( 
      <View style={styles.container}> 
        <TouchableHighlight 
            onPress={() => { 
               alert('You tapped the button!'); 
             }} 
             underlayColor="white" 
          > 
          <View style={styles.button}> 
            <Text style={styles.buttonText}>TouchableHighlight</Text> 
          </View> 
        </TouchableHighlight> 
        <TouchableOpacity 
            onPress={() => { 
               alert('You tapped the button!'); 
             }}> 
          <View style={styles.button}> 
            <Text style={styles.buttonText}>TouchableOpacity</Text> 
          </View> 
        </TouchableOpacity> 
        <TouchableNativeFeedback 
                        onPress={() => { 
               alert('You tapped the button!'); 
             }} 
            background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}> 
          <View style={styles.button}> 
            <Text style={styles.buttonText}>TouchableNativeFeedback {Platform.OS !== 'android' ? '(Android only)' : ''}</Text> 
          </View> 
        </TouchableNativeFeedback> 
        <TouchableWithoutFeedback 
                        onPress={() => { 
               alert('You tapped the button!'); 
             }} 
            > 
          <View style={styles.button}> 
            <Text style={styles.buttonText}>TouchableWithoutFeedback</Text> 
          </View> 
        </TouchableWithoutFeedback> 
        <TouchableHighlight             onPress={() => { 
               alert('You tapped the button!'); 
             }}             onPress={() => { 
               alert('You long-pressed the button!'); 
             }} underlayColor="white"> 
          <View style={styles.button}> 
            <Text style={styles.buttonText}>Touchable with Long Press</Text> 
          </View> 
        </TouchableHighlight> 
      </View> 
    ); 
}

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 1er "é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;

        <ScrollView
            pagingEnabled ={true}
            >
                <ScrollView
                        horizontal ={true}
                        pagingEnabled ={true}
                 >
                         <View style={[ styles.page,] }>
                                    < FlexDirectionBasics />
                          </View>
                          <View style={[ styles.page,] }>
                                    < JustifyContentBasics />
                           </View>
                   </ScrollView>
            <View style={[ styles.page,] }>
                < JustifyContentBasics />
            </View>
            <View style={[ styles.page,] }>
                 <View style={[ styles.page,{ height: screenHeight / 1.5 ,}] }>
                     < AlignContentLayout />
                  </View>
            </View>
        </ScrollView>

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