Les redéfinir permet d’exécuter du code spécifique.
constructor(props)
: initialisation des propriétés et de l’état.render()
: renvoi d’un élément React Native.componentDidMount()
: appels asynchrones.shouldComponentUpdate()
: renvoi d’un booléen pour annuler la mise à jour.componentDidUpdate()
: actions après la mise à jour du rendu.Propriété style
pour les composants de base.
Semblable à CSS avec nommage camelCase.
import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
const styles = StyleSheet.create({
bigblue: {
color: "blue",
fontWeight: "bold",
fontSize: 30,
},
red: {
color: "red",
},
});
export default class LotsOfStyles extends Component {
render() {
return (
<View>
<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>
);
}
}
Deux possibilités :
Utile pour les composants qui doivent toujours être affichés à la même taille.
import React, { Component } from "react";
import { View } from "react-native";
export default class FixedDimensionsBasics extends Component {
render() {
return (
<View>
<View
style={{ width: 50, height: 50, backgroundColor: "powderblue" }}
/>
<View style={{ width: 100, height: 100, backgroundColor: "skyblue" }} />
<View
style={{ width: 150, height: 150, backgroundColor: "steelblue" }}
/>
</View>
);
}
}
Les dimensions s’adaptent à l’espace disponible.
flex:1
=> espace partagé équitablement entre tous les composants d’un même parent (démo).
import React, { Component } from "react";
import { View } from "react-native";
export default class FlexDimensionsBasics extends Component {
render() {
return (
// Try removing the `flex: 1` on the parent View.
// The parent will not have dimensions, so the children can't expand.
// What if you add `height: 300` instead of `flex: 1`?
<View style={{ flex: 1 }}>
<View style={{ flex: 1, backgroundColor: "powderblue" }} />
<View style={{ flex: 2, backgroundColor: "skyblue" }} />
<View style={{ flex: 3, backgroundColor: "steelblue" }} />
</View>
);
}
}
flexDirection
: flux des élémentscolumn
(par défaut), row
, column-reverse
, row-reverse
.
justifyContent
: axe principalalignItems
: axe secondaireUtiliser expo install
au lieu de npm install
assure l’installation de versions compatibles avec celle d’Expo.
# Core components and dependencies
expo install @react-navigation/native react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
# StackNavigator dependencies
expo install @react-navigation/stack
# BottomTabNavigator dependencies
expo install @react-navigation/bottom-tabs
# DrawerNavigator dependencies
expo install @react-navigation/drawer
Principe similaire au web : gestion d’une pile de vues.
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
navigation
est automatiquement ajouté aux props des vues gérées par React Navigation.// Navigue vers une vue
this.props.navigation.navigate("RouteName");
// Permet d'aller plusieurs fois vers la même vue
this.props.navigation.push("RouteName");
// Revient à la vue précédente
this.props.navigation.goBack();
// Côté vue appelante
this.props.navigation.navigate("RouteName", {
/* Objet dont les propriétés constituent les arguments */
param1: "value1",
// ...
});
// Côté vue appelée
// La propriété route.params permet de récupérer les paramètres passés à la vue
const { param1 } = this.props.route.params;
<MainStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "#f4511e",
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold",
},
}}
>
// ...
<RootStack.Navigator mode="modal" headerMode="none">
<RootStack.Screen
name="Main"
component={MainStackScreen}
options={{ headerShown: false }}
/>
<RootStack.Screen name="MyModal" component={ModalScreen} />
</RootStack.Navigator>
https://github.com/ensc-mobi/StackNavigatorDemo
Affichage d’onglets en bas de l’écran.
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
Fonctionnement identique à celui de la navigation entre les vues d’un StackNavigator
.
<Button
title="Go to Settings"
onPress={() => navigation.navigate("Settings")}
/>
const HomeStack = createStackNavigator();
function HomeStackScreen() {
// Define home stack
}
const SettingsStack = createStackNavigator();
function SettingsStackScreen() {
// Define settings stack
}
const Tab = createBottomTabNavigator();
function TabScreen() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeStackScreen} />
<Tab.Screen name="Settings" component={SettingsStackScreen} />
</Tab.Navigator>
);
}
https://github.com/ensc-mobi/TabNavigatorDemo