Pr. Habib Ayad A.
U 2022/2023
React Native est un framework JavaScript qui permet de réaliser des
applications natives, sur iOS comme sur Android - et, sous conditions,
sur Windows Phone. Son principal avantage est qu’il propose
l’utilisation d’un seul code source JavaScript pour construire deux
applications, au lieu de développer séparément une application iOS et
une application Android.
2
Un framework JavaScript unique permettant de capitaliser sur des
développeurs full stack, front et back end.
Des coûts de développement divisés par deux.
Des développements plus rapides qu’avec d’autres technologies grâce à
une communauté riche et des librairies directement réutilisables.
3
4
JDK
Android Studio
Une machine Intel avec la technologie de virtualisation activée
pour HAXM (facultatif, nécessaire uniquement si vous
souhaitez utiliser un émulateur)
Nodejs
5
Ajouter Android SDK aux variables d’environnements
6
Démarrez la ligne de commande en tant qu'administrateur
exécutez les commandes suivantes:
npm install -g react-native-cli
7
Lancer la commande suivante depuis le dossier de vos projets:
npx react-native@latest init nom_de_projet
Démarrer le projet:
npx react-native start
8
/* eslint-disable prettier/prettier */
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const App = ()=> {
return (
<View style={styles.container}>
<View style={{flex:0.3, backgroundColor: 'blue'}}></View>
<View style={{flex:0.2, backgroundColor: 'red'}}></View>
<View style={{flex:0.5, backgroundColor: 'white'}}>
<View style={{flex:1, backgroundColor: 'magenta'}}></View>
<View style={{flex:1, backgroundColor: 'yellow'}}></View>
<View style={{flex:1, backgroundColor: 'green'}}></View>
</View>
</View>
9
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
height: 200,
backgroundColor: 'yellow',
},
titre: {
color: 'green',
fontSize: 30,
},
});
export default App;
10
import React, { useState } from 'react';
import { View, Text, StyleSheet, TextInput} from 'react-native';
const App = ()=> {
const [txt, setTxt] = useState('');
return (
<View style={styles.container}>
<TextInput style={styles.inptxt}
onChangeText={(value)=>setTxt(value)}
/>
<Text style={styles.titre}> Vous avez saisi: {txt}</Text>
</View>
);
}
export default App;
11
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'green',
alignItems: 'center',
margin: 10,
},
titre: {
color: 'yellow',
fontSize: 30,
},
inptxt: {
borderColor: 'yellow',
borderWidth: 2,
borderRadius: 5,
width:300,
margin: 20,
color: 'yellow',
fontSize: 20,
},
}); 12
API film
https://api.themoviedb.org/3/search/movie?api_key=caf9b1f2
ec887b6da5eaf69008da8b67&language=fr&query=parrain
Accès à l’image:
https://image.tmdb.org/t/p/w300/pPx8cu9ly9YN6dfPhmBkus
HGclt.jpg
13
