Combine les avantages du natif (look’n’feel, performances) et de l’hybride (une seule base de code).
Limite potentielle : le support de l’OS dépend entièrement du framework.
Framework créé par Facebook, open source depuis 2015.
Déclinaison mobile du framework JavaScript React.
Framework pour faciliter la création et le déploiement d’applications React Native.
# Install expo-cli globally
# (Node.js and Git are prerequisites)
npm install -g expo-cli
# Create a new app in the my-new-project subfolder
# Use managed TypeScript template
expo init my-new-project -t expo-template-blank-typescript
Workflow managé : projet entièrement géré par Expo (plus simple).
Workflow bare : plus proche d’un projet React Native pur.
cd my-new-project # move into project directory
npm start # Or 'expo start'
Ensuite, scan du QR Code depuis l’application Expo (Android) ou l’appareil photo du smartphone (iOS).
L’application mobile Expo client doit accéder au serveur web de la machine de développement pour pouvoir lancer l’application RN.
Il existe plusieurs modes de connexion :
{
"expo": {
"name": "My New Project",
"slug": "my-new-project",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
}
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~40.0.0",
"expo-status-bar": "~1.0.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"@babel/core": "~7.9.0",
"@types/react": "~16.9.35",
"@types/react-dom": "~16.9.8",
"@types/react-native": "~0.63.2",
"typescript": "~4.0.0"
},
"private": true
}
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.tsx to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
// JSX for React (web)
const name = "Clarisse Agbegnenou";
const element = <h1>Hello, {name}</h1>;
// JSX for React Native (mobile)
const a = <View />;
const b = (
<View foo="hello" bar={baz}>
<Text>42</Text>
</View>
);
Les composants sont les blocs de base d’une application React (Native).
Ils permettent de créer une UI sous forme déclarative par assemblage de composants.
Ils doivent comporter une fonction qui définit leur rendu visuel.
import React from "react";
import { Text } from "react-native";
const Cat = () => {
const name = "Maru";
return <Text>Hello, I am {name}!</Text>;
};
export default Cat;
render()
définit le rendu.import React from "react";
import { Text } from "react-native";
class Cat extends React.Component {
render() {
const name = "Maru";
return <Text>Hello, I am {name}!</Text>;
}
}
export default Cat;
Caractéristiques définies au moment de la création, modifiables uniquement par le composant parent (démo).
import React, { Component } from "react";
import { Text, View } from "react-native";
class Greeting extends Component {
// Component has a name property which is of type string
constructor(public props: { name: string }) {
super(props);
}
render() {
return <Text>Hello {this.props.name}!</Text>;
}
}
export default class LotsOfGreetings extends Component {
render() {
return (
<View style={{ alignItems: "center" }}>
<Greeting name="John" />
<Greeting name="Paul" />
<Greeting name="Jones" />
</View>
);
}
}
Etat interne (données) d’un composant, susceptible de changer au cours du temps (mutable). Modifié uniquement via setState()
(démo).
import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
class Counter extends Component {
constructor(public props: { color: string; size: number }) {
super(props);
this.state = { count: 0 };
setInterval(() => {
this.setState({ count: this.state.count + 1 });
}, 1000);
}
render() {
const { count } = this.state;
const { color, size } = this.props;
return <Text style={{ color, fontSize: size }}>{count}</Text>;
}
}
export default class CounterApp extends Component {
render() {
return (
<View style={styles.container}>
<Counter color="red" size={50} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});