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