One place for hosting & domains

      Comment éviter les renvois à la ligne avec CSS


      Introduction

      De manière générale, les développeurs préfèrent utiliser le renvoi à la ligne pour mettre en page un texte sur une page Web. Le renvoi à la ligne permet d’imposer une certaine contrainte sur le texte et de ne pas avoir à faire face à des problèmes de conception. Le renvoi à la ligne permet aussi de ne pas obliger l’utilisateur à faire défiler le texte horizontalement pour pouvoir le lire. Mais il se peut que, parfois, vous souhaitiez que le texte reste sur une seule et même ligne, peu importe sa longueur. Pour empêcher les renvois à la ligne et l’habillage de texte de certains éléments, vous pouvez utiliser la propriété white-space de CSS.

      Au cours de ce tutoriel, vous allez mettre en forme le même bloc de texte de 4 manières différentes. Avec la première, vous utiliserez des renvois de lignes, puis avec les trois autres, vous le ferez sans renvoi à la ligne :

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Voilà, nous disposons maintenant de plusieurs possibilités de mettre en forme notre texte avec ou sans renvoi à la ligne.

      Conditions préalables

      Pour suivre ce tutoriel, vous aurez besoin de :

      Étape 1 — Empêcher et forcer les renvois à la ligne dans CSS

      Au cours de cette étape, vous allez créer une feuille de style avec 3 catégories différentes. Chacune traitera les renvois à la ligne de manière différente : avec la première, le texte sera coupé par défaut. Avec la seconde et la troisième, vous forcerez le texte à ne pas créer de nouvelle ligne et de renvoi à la ligne.

      Tout d’abord, créez et ouvrez un nouveau fichier que vous appellerez main.css en utilisant nano ou l’éditeur de votre choix :

      Ajoutez le contenu suivant. Il permettra d'introduire 3 catégories de CSS en utilisant plusieurs propriétés, notamment white-space :

      ./main.css

      .sammy-wrap {
          border-radius: 6px;
          background-color: aliceblue;
          border: 2px dashed gray;
          max-width: 70%;
          padding: 1em;
          margin-bottom: .4em;
      }
      .sammy-nowrap-1 {
          border-radius: 6px;
          background-color: aliceblue;
          border: 2px dashed gray;
          max-width: 70%;
          padding: 1em;
          margin-bottom: .4em;
          white-space: nowrap;
      }
      .sammy-nowrap-2 {
          border-radius: 6px;
          background-color: aliceblue;
          border: 2px dashed gray;
          max-width: 70%;
          padding: 1em;
          margin-bottom: .4em;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }
      

      Votre première catégorie se nomme .sammy-wrap. Elle permet de configurer six des propriétés les plus courantes en CSS, notamment border-radius, background-color, border max-width, padding et margin-bottom. Cette catégorie créera une boîte visuelle, mais elle ne vous permettra pas de configurer des propriétés spécifiques de renvois à la ligne. Cela signifie que les renvois à la ligne se feront par défaut.

      Votre deuxième catégorie se nomme .sammy-nowrap-1. Elle permet de configurer la même boîte que celle de .sammy-wrap, mais, ici, vous ajoutez une autre propriété : white-space. La propriété white-space intègre de nombreuses options, qui permettent toutes de configurer la manière dont le white space est traité dans un élément donné. Ici, vous avez configuré white-space sur nowrap, ce qui empêchera tout renvoi à la ligne.

      Votre troisième catégorie est .sammy-nowrap-2. Elle permet d'ajouter un white-space et deux propriétés supplémentaires : overflow et text-overflow. La propriété overflow gère le scrollable overflow, c'est-à-dire lorsque le contenu d'un élément va au-delà des bords de l'élément en question. La propriété overflow permet de pouvoir faire défiler le texte, de le rendre visible ou de le cacher. Configurez overflow sur hidden. Ensuite, utilisez la propriété text-overflow pour personnaliser votre texte encore plus. text-overflow vous permet également de signaler la présence de texte additionnel caché à l'utilisateur. Étant donné que vous l'avez configuré sur ellipsis, vous n'aurez plus de renvoi à la ligne ou de texte en dehors de la boîte. CSS cachera le texte qui dépasse et signalera la présence de contenu caché par des ...

      Enregistrez et fermez votre fichier.

      Maintenant que vous disposez d'une feuille de style, vous êtes prêt à créer un court fichier HTML en utilisant un texte qui vous servira d'exemple. Ensuite, vous chargerez la page Web dans un navigateur pour voir de quelle manière CSS peut empêcher les renvois à la ligne.

      Étape 2 — Créer le fichier HTML

      Une fois que vous avez configuré vos catégories CSS, vous pouvez les appliquer au texte qui vous sert d'exemple.

      Créez un fichier que vous appellerez index.html et ouvrez-le dans l'éditeur de votre choix. Veillez à bien le placer dans le même dossier que main.css :

      Ajoutez le contenu suivant, qui associera à la fois main.css à votre stylesheet, puis appliquera les catégories à un bloc de texte échantillon :

      ./index.html

      <!DOCTYPE HTML>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>How To Prevent Line Breaks with CSS</title>
      <link href="https://www.digitalocean.com/community/tutorials/main.css" rel="stylesheet">
      </head>
      
      <body>
      <p class="sammy-wrap"    > Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>
      
      <p class="sammy-nowrap-1"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>
      
      <p class="sammy-nowrap-2"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>
      
      <p class="sammy-wrap"    > Medusafish&nbsp;banded&nbsp;killifish&nbsp;convict&nbsp;blenny&nbsp;saury&nbsp;threadsail&nbsp;beluga&nbsp;sturgeon.&nbsp;Indian&nbsp;mul&nbsp;mora&nbsp;cisco&nbsp;masu&nbsp;salmon,&nbsp;roosterfish&nbsp;requiem&nbsp;shark&nbsp;longnose&nbsp;lancetfish&nbsp;bluefish&nbsp;red&nbsp;snapper&nbsp;Sacramento&nbsp;splittail&nbsp;giant&nbsp;danio.</p>
      </body>
      </html>
      

      Vous venez d'attribuer votre style d'habillage standard au premier bloc de texte, votre style nowrap au deuxième, et nowrap qui est hidden avec ellipsis au troisième. Vous avez attribué sammy-wrap au quatrième échantillon. Mais, en insérant directement des espaces insécables (&nbsp;) dans le HTML, vous écrasez l'habillage par défaut. Si, vous devez exceptionnellement empêcher les renvois à la ligne, vous pouvez utiliser des espaces insécables pour le faire rapidement.

      Ouvrez index.html dans un navigateur Web pour voir votre résultat. Voilà de quelle manière apparaîtront vos quatre blocs de texte :

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Vous venez de personnaliser vos propriétés CSS pour empêcher ou permettre les renvois à ligne en utilisant quatre méthodes différentes.

      Conclusion

      Au cours de ce tutoriel, vous avez utilisé CSS pour empêcher les renvois à la ligne dans un bloc de texte. Vous avez mis en forme le texte à l'intérieur d'une boîte et ajouté la propriété white-space pour remplacer l'habillage par défaut. Pour en savoir plus sur la manière d'utiliser l'habillage de texte et les white-space, envisagez d'en apprendre davantage sur l'intégralité des fonctionnalités de la propriété white-space de CSS.



      Source link

      Comment utiliser le routage avec React Navigation dans React Native


      Introduction

      React Navigation est une bibliothèque populaire pour le routage et la navigation dans une application React Native.

      Cette bibliothèque aide à résoudre le problème de la navigation entre plusieurs écrans et du partage des données entre eux.

      À la fin de ce tutoriel, vous disposerez d’un réseau social rudimentaire. Il affichera le nombre de connexions dont dispose un utilisateur et fournira un moyen de se connecter avec des amis supplémentaires. Vous utiliserez cet exemple d’application pour découvrir comment naviguer dans les écrans d’applications mobiles en utilisant react-navigation.

      Conditions préalables

      Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

      Remarque : Si vous avez travaillé avec react-navigation auparavant, vous pourriez rencontrer certaines différences. Vous pouvez consulter la documentation pour les guides pour migrer de 3.x et migrer de 4.x.

      Ce tutoriel a été vérifié avec Node v14.7.0, npm v6.14.7, react v16.13.1, react-native v0.63.2, @react-navigation/native v5.7.3 et @react-navigation/stack v5.9.0.

      Étape 1 – Création d’une nouvelle application React Native

      Tout d’abord, créez une nouvelle application React Native en entrant la commande suivante dans votre terminal :

      • npx react-native init MySocialNetwork --version 0.63.2

      Ensuite, naviguez vers le nouveau répertoire :

      Et lancez l'application pour iOS :

      Ou alors, pour Android :

      Note : Si vous rencontrez des problèmes, vous devrez peut-être consulter Résolution de problèmes pour React Native CLI.

      Cela permettra de créer un projet squelette pour vous. Il ne ressemble pas beaucoup à un réseau social pour l'instant. Réglons ça.

      Ouvrez App.js :

      Remplacez le contenu d’App.js avec le code suivant pour afficher un message de bienvenue :

      App.js

      import React from 'react';
      import { StyleSheet, Text, View } from 'react-native';
      
      class App extends React.Component {
        render() {
          return (
            <View style={styles.container}>
              <Text>Welcome to MySocialNetwork!</Text>
            </View>
          );
        }
      }
      
      const styles = StyleSheet.create({
        container: {
          flex: 1,
          backgroundColor: '#fff',
          alignItems: 'center',
          justifyContent: 'center',
        },
      });
      
      export default App;
      

      Sauvegardez le fichier. Maintenant, lorsque vous exécutez l'application, un Welcome to MySocialNetwork! MySocialNetwork! apparaîtra dans votre simulateur.

      Dans l'étape suivante, vous ajouterez d'autres écrans à votre application.

      Étape 2 - Création d'un HomeScreen et FriendsScreen

      Actuellement, vous disposez d'un seul écran affichant un message de bienvenue. Au cours de cette étape, vous créerez les deux écrans de votre application : HomeScreen et FriendsScreen.

      HomeScreen

      Votre application aura besoin d'un HomeScreen. Le HomeScreen affichera le nombre d'amis déjà présents dans votre réseau.

      Prenez le code d’App.js et ajoutez-le à un nouveau fichier appelé HomeScreen.js :

      Ouvrez HomeScreen.js:

      Modifiez HomeScreen.js pour utiliser HomeScreen au lieu d’App :

      HomeScreen.js

      import React from 'react';
      import { StyleSheet, Text, View } from 'react-native';
      
      class HomeScreen extends React.Component {
        render() {
          return (
            <View style={styles.container}>
              <Text>You have (undefined) friends.</Text>
            </View>
          );
        }
      }
      
      // ...
      
      export default HomeScreen;
      

      Ce code produira un message de remplacement You have (undefined) friends. Vous fournirez une valeur plus tard.

      FriendsScreen

      Votre application aura également besoin d'un FriendsScreen. Sur le FriendsScreen, vous pourrez ajouter de nouveaux amis.

      Prenez le code de App.js et ajoutez-le à un nouveau fichier appelé FriendsScreen.js :

      • cp App.js FriendsScreen.js

      Ouvrez FriendsScreen.js :

      Modifiez FriendsScreen.js pour utiliser FriendsScreen au lieu d’App :

      FriendsScreen.js

      import React from 'react';
      import { StyleSheet, Text, View } from 'react-native';
      
      class FriendsScreen extends React.Component {
        render() {
          return (
            <View style={styles.container}>
              <Text>Add friends here!</Text>
            </View>
          );
        }
      }
      
      // ...
      
      export default FriendsScreen;
      

      Ce code produira un Add friends here! here!

      À ce stade, vous avez un HomeScreen et FriendsScreen. Cependant, il n'y a pas moyen de naviguer entre eux. Vous développerez cette fonctionnalité au cours de la prochaine étape.

      Étape 3 - Utilisation des StackNavigator avec React Navigation

      Pour naviguer entre les écrans, vous utiliserez un StackNavigator. Un StackNavigator fonctionne exactement comme une pile d'appels. Chaque écran vers lequel vous naviguez est poussé vers le haut de la pile. Chaque fois que vous appuyez sur le bouton Retour, les écrans se détachent du haut de la pile.

      Tout d'abord, installez @react-navigation/native :

      • npm install @react-navigation/native@5.7.3

      Ensuite, installez @react-navigation/stack et ses dépendances :

      • npm install @react-navigation/stack@5.9.0 @react-native-community/masked-view@0.1.10 react-native-screens@2.10.1 react-native-safe-area-context@3.1.4 react-native-gesture-handler@1.7.0

      Remarque : Si vous développez pour iOS, vous pouvez avoir besoin de naviguer vers le répertoireios et exécuter pod install.

      Ensuite, revisitez App.js :

      Ajoutez NavigationContainer et createStackNavigator à App.js :

      App.js

      import 'react-native-gesture-handler';
      import React from 'react';
      import { StyleSheet } from 'react-native';
      import { NavigationContainer } from '@react-navigation/native';
      import { createStackNavigator } from '@react-navigation/stack';
      
      const Stack = createStackNavigator();
      

      Ensuite, remplacez le contenu de render :

      App.js

      // ...
      
      class App extends React.Component {
        render() {
          return (
            <NavigationContainer>
              <Stack.Navigator>
              </Stack.Navigator>
            </NavigationContainer>
          );
        }
      }
      
      // ...
      

      Nichée à l'intérieur <Stack.Navigator>, ajoutez le HomeScreen :

      App.js

      import 'react-native-gesture-handler';
      import React from 'react';
      import { StyleSheet } from 'react-native';
      import { NavigationContainer } from '@react-navigation/native';
      import { createStackNavigator } from '@react-navigation/stack';
      import HomeScreen from './HomeScreen';
      
      const Stack = createStackNavigator();
      
      class App extends React.Component {
        render() {
          return (
            <NavigationContainer>
              <Stack.Navigator>
                <Stack.Screen
                  name="Home"
                  component={HomeScreen}
                />
              </Stack.Navigator>
            </NavigationContainer>
          );
        }
      }
      
      // ...
      

      Ce code crée une très petite pile pour votre navigateur avec un seul écran : HomeScreen.

      Nichée à l'intérieur <Stack.Navigator>, ajoutez le FriendsScreen :

      App.js

      import 'react-native-gesture-handler';
      import React from 'react';
      import { StyleSheet } from 'react-native';
      import { NavigationContainer } from '@react-navigation/native';
      import { createStackNavigator } from '@react-navigation/stack';
      import HomeScreen from './HomeScreen';
      import FriendsScreen from './FriendsScreen';
      
      const Stack = createStackNavigator();
      
      class App extends React.Component {
        render() {
          return (
            <NavigationContainer>
              <Stack.Navigator>
                <Stack.Screen
                  name="Home"
                  component={HomeScreen}
                />
                <Stack.Screen
                  name="Friends"
                  component={FriendsScreen}
                />
              </Stack.Navigator>
            </NavigationContainer>
          );
        }
      }
      
      // ...
      

      Ce code ajoute le FriendsScreen au navigateur.

      Remarque : Cela diffère de la façon dont createStackNavigator a été utilisé dans les versions précédentes de React Navigation.

      Maintenant, le navigateur est conscient de vos deux écrans.

      Ajouter des boutons à HomeScreen et FriendsScreen

      Enfin, ajoutez des boutons pour vous déplacer entre vos deux écrans.

      Dans HomeScreen.js, ajoutez le code suivant :

      HomeScreen.js

      import React from 'react';
      import { StyleSheet, Text, View, Button } from 'react-native';
      
      class HomeScreen extends React.Component {
        render() {
          return (
            <View style={styles.container}>
              <Text>You have (undefined) friends.</Text>
      
              <Button
                title="Add some friends"
                onPress={() =>
                  this.props.navigation.navigate('Friends')
                }
              />
            </View>
          );
        }
      }
      
      // ...
      

      Dans FriendsScreen.js, ajoutez le code suivant :

      FriendsScreen.js

      import React from 'react';
      import { StyleSheet, Text, View, Button } from 'react-native';
      
      class FriendsScreen extends React.Component {
        render() {
          return (
            <View style={styles.container}>
              <Text>Add friends here!</Text>
      
              <Button
                title="Back to home"
                onPress={() =>
                  this.props.navigation.navigate('Home')
                }
              />
            </View>
          );
        }
      }
      
      // ...
      

      Parlons de this.props.navigation. Tant que votre écran est inclus dans le StackNavigatorIl hérite automatiquement de nombreux accessoires utiles de la navigation objet. Dans ce cas, vous avez utilisé navigate pour passer à une autre page.

      HomeScreen et FriendsScreen

      Si vous ouvrez maintenant votre simulateur, vous pouvez naviguer entre le HomeScreen et le FriendsScreen.

      Étape 4 - Utilisation de Context pour transmettre des données à d'autres écrans

      Dans cette étape, vous allez créer un ensemble d'amis possibles - Alice, Bob et Sammy - et une série vide d'amis actuels. Vous créerez également une fonctionnalité permettant à l'utilisateur d'ajouter des amis possibles à ses amis actuels.

      Ouvrez App.js : 

      Ajoutez possibleFriends et currentFriends à l'état du composant :

      App.js

      // ...
      
      class App extends React.Component {
        constructor(props) {
          super(props)
          this.state = {
            possibleFriends: [
              'Alice',
              'Bob',
              'Sammy',
            ],
            currentFriends: [],
          }
        }
      
        // ...
      }
      
      // ...
      

      Ensuite, ajoutez une fonction permettant de déplacer un ami éventuel dans la liste des amis actuels :

      App.js

      // ...
      
      class App extends React.Component {
        constructor(props) {
          super(props)
          this.state = {
            possibleFriends: [
              'Alice',
              'Bob',
              'Sammy',
            ],
            currentFriends: [],
          }
        }
      
        addFriend = (index) => {
          const {
            currentFriends,
            possibleFriends,
          } = this.state
      
          // Pull friend out of possibleFriends
          const addedFriend = possibleFriends.splice(index, 1)
      
          // And put friend in currentFriends
          currentFriends.push(addedFriend)
      
          // Finally, update the app state
          this.setState({
            currentFriends,
            possibleFriends,
          })
        }
      
        // ...
      }
      
      // ...
      

      À ce stade, vous avez terminé la construction de la fonctionnalité permettant d'ajouter des amis.

      Ajouter FriendsContext à App

      Vous pouvez maintenant ajouter des amis dans App.jsmais vous voudrez les ajouter à FriendsScreen.js et les faire afficher dans HomeScreen.js. Comme ce projet est construit avec React, vous pouvez injecter cette fonctionnalité dans vos écrans avec context.

      Note : Dans les versions précédentes de React Navigation, il était possible d'utiliser screenProps pour partager les données entre les écrans. Dans la version actuelle de React Navigation, il est recommandé d'utiliser React Context pour partager les données entre les écrans.

      Pour éviter une référence circulaire, vous voudrez un nouveau fichier FriendsContext :

      Exportez FriendsContext :

      FriendsContext

      import React from 'react';
      
      export const FriendsContext = React.createContext();
      

      Ouvrez App.js : 

      Ajoutez le FriendsContext :

      App.js

      import 'react-native-gesture-handler';
      import React from 'react';
      import { StyleSheet } from 'react-native';
      import { NavigationContainer } from '@react-navigation/native';
      import { createStackNavigator } from '@react-navigation/stack';
      import { FriendsContext } from './FriendsContext';
      import Home from './Home';
      import Friends from './Friends';
      
      const Stack = createStackNavigator();
      
      class App extends React.Component {
        // ...
      
        render() {
          return (
            <FriendsContext.Provider>
              <NavigationContainer>
                <Stack.Navigator>
                  <Stack.Screen
                    name="Home"
                    component={Home}
                  />
                  <Stack.Screen
                    name="Friends"
                    component={Friends}
                  />
                </Stack.Navigator>
              </NavigationContainer>
            </FriendsContext.Provider>
          );
        }
      }
      
      // ...
      

      Ce code établit FriendsContext comme nouvel objet Context et enveloppe le NavigationContainer dans un Context.Provider afin que tous les enfants de l'arbre des composants puissent s'abonner aux changements de contexte.

      Puisque vous n'utilisez plus View ou Text, il est possible de supprimer ces importations de react-native.

      Vous devrez fournir une valeur pour rendre les données accessibles aux consommateurs :

      App.js

      // ...
      
      class App extends React.Component {
        // ...
      
        render() {
          return (
            <FriendsContext.Provider
              value={
                {
                  currentFriends: this.state.currentFriends,
                  possibleFriends: this.state.possibleFriends,
                  addFriend: this.addFriend
                }
              }
            >
              <NavigationContainer>
                <Stack.Navigator>
                  <Stack.Screen
                    name="Home"
                    component={Home}
                  />
                  <Stack.Screen
                    name="Friends"
                    component={Friends}
                  />
                </Stack.Navigator>
              </NavigationContainer>
            </FriendsContext.Provider>
          );
        }
      }
      
      // ...
      

      Cela permettra à la HomeScreen et FriendsScreen de référencer tout changement de contexte currentFriends et possibleFriends.

      Vous pouvez maintenant travailler sur le référencement du contexte dans vos écrans.

      Ajouter FriendsContext à HomeScreen

      Dans cette étape, vous configurerez l'application pour afficher le nombre actuel d'amis.

      Ouvrez HomeScreen.js :

      Et ajoutez le FriendsContext :

      HomeScreen.js

      import React from 'react';
      import { StyleSheet, Text, View, Button } from 'react-native';
      import { FriendsContext } from './FriendsContext';
      
      class HomeScreen extends React.Component {
        // ...
      }
      HomeScreen.contextType = FriendsContext;
      
      // ...
      

      Ce code établit un Classe.contexteType. Vous pouvez maintenant accéder au contexte dans vos écrans.

      Par exemple, faisons en sorte que votre HomeScreen affiche combien de currentFriends vous avez :

      HomeScreen.js

      import React from 'react';
      import { StyleSheet, Text, View, Button } from 'react-native';
      import { FriendsContext } from './FriendsContext';
      
      class Home extends React.Component {
        render() {
          return (
            <View style={styles.container}>
              <Text>You have { this.context.currentFriends.length } friends!</Text>
      
              <Button
                title="Add some friends"
                onPress={() =>
                  this.props.navigation.navigate('Friends')
                }
              />
            </View>
          );
        }
      }
      HomeScreen.contextType = FriendsContext;
      
      // ...
      

      Si vous ouvrez à nouveau votre application dans le simulateur et que vous visualisez le HomeScreenvous verrez le message : You have 0 friends!

      Ajoutez FriendsContext à FriendsScreen

      Dans cette étape, vous configurerez l'application pour afficher les amis possibles et fournir des boutons pour les ajouter aux amis actuels.

      Ensuite, ouvrez FriendsScreen.js :

      Et ajoutez le FriendsContext :

      FriendsScreen.js

      import React from 'react';
      import { StyleSheet, Text, View, Button } from 'react-native';
      import { FriendsContext } from './FriendsContext';
      
      class FriendsScreen extends React.Component {
        // ...
      }
      FriendsScreen.contextType = FriendsContext;
      
      // ...
      

      Ce code établit un Class.contextType.

      Maintenant, créez un bouton pour ajouter des amis dans FriendsScreen.js :

      FriendsScreen.js

      import React from 'react';
      import { StyleSheet, Text, View, Button } from 'react-native';
      import { FriendsContext } from './FriendsContext';
      
      class Friends extends React.Component {
        render() {
          return (
            <View style={styles.container}>
              <Text>Add friends here!</Text>
      
              {
                this.context.possibleFriends.map((friend, index) => (
                  <Button
                    key={ friend }
                    title={ `Add ${ friend }` }
                    onPress={() =>
                      this.context.addFriend(index)
                    }
                  />
                ))
              }
      
              <Button
                title="Back to home"
                onPress={() =>
                  this.props.navigation.navigate('Home')
                }
              />
            </View>
          );
        }
      }
      FriendsScreen.contextType = FriendsContext;
      
      // ...
      

      Si vous ouvrez à nouveau votre application dans le simulateur et que vous visualisez le FriendsScreen, vous verrez une liste d'amis à ajouter.

      HomeScreen avec 0 currentFriends et FriendsScreen avec 3 possibleFriends

      Si vous visitez le FriendsScreen et cliquez sur le bouton pour ajouter des amis, vous verrez la liste des possibleFriends diminuer. Si vous visitez le HomeScreen, vous verrez le nombre d'amis augmenter.

      Vous pouvez désormais naviguer entre les écrans et partager des données entre eux.

      Conclusion

      Dans ce tutoriel, vous avez créé un exemple d'application React Native avec plusieurs écrans. En utilisant React Navigation, vous avez imaginé un moyen de naviguer entre les écrans. En utilisant React Context, vous avez développé un moyen de partager des données entre les écrans.

      L'ensemble du code source de ce tutoriel est disponible sur GitHub.

      Si vous souhaitez approfondir votre connaissance de React Navigation, consultez leur documentation.

      React Navigation n'est pas la seule solution de routage et de navigation. Il y a aussi React Native Navigation, React Native Router Fluxet React Router Native.

      Si vous souhaitez en savoir plus sur React, consultez notre série Comment coder dans React.js ou consultez notre page thématique React pour des exercices et des projets de programmation.



      Source link

      Comment créer un effet parallaxe avec défilement en pure CSS


      Introduction

      La technologie CSS moderne constitue un outil puissant que vous pouvez utiliser pour créer de nombreuses fonctionnalités d’interface utilisateur (UI) avancées. Auparavant, ces caractéristiques reposaient sur des bibliothèques JavaScript.

      Au cours de ce guide, vous allez configurer quelques lignes de CSS pour créer un effet scrolling parallax sur une page Web. Vous utiliserez des images de placekitten.com comme images de balise d’arrière-plan.

      Une fois que vous aurez fini ce tutoriel, vous aurez une page Web avec un effet parallaxe avec défilement en pure CSS.

      Avertissement : les propriétés expérimentales de CSS utilisées dans cet article ne fonctionnent pas sur tous les navigateurs. Ce projet a été testé et fonctionne sur Chrome. Cette technique ne fonctionne pas correctement avec Firefox, Safari et iOS, en raison de certaines optimisations de ces navigateurs.

      Étape 1 — Création d’un nouveau projet

      Pour cette étape, utilisez la ligne de commande afin de configurer un nouveau dossier de projet et des fichiers. Pour commencer, ouvrez votre terminal et créez un nouveau dossier de projet.

      Saisissez la commande suivante pour créer le dossier de projet :

      Pour cet exercice, appelez le dossier css-parallax. Maintenant, passez dans le dossier css-parallax :

      Ensuite, créez un fichier index.html dans votre dossier css-parallax avec la commande nano suivante :

      Placez l'intégralité du HTML du projet dans ce fichier.

      Au cours de la prochaine étape, vous allez commencer à créer la structure de la page Web.

      Étape 2 — Configuration de la structure de l'application

      Au cours de cette étape, vous allez ajouter le HTML dont vous avez besoin pour créer la structure du projet.

      Ajoutez le code suivant dans votre fichier index.html :

      css-parallax/index.html

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>CSS Scrolling Parallax</title>
        </head>
        <body></body>
      </html>
      

      Il s'agit de la structure de base de plupart des pages Web qui utilisent HTML.

      Ajoutez le code suivant dans la balise <body> :

      css-parallax/index.html

      
      <body>
      ...
         <main>
            <section class="section parallax bg1">
               <h1>Cute Kitten</h1>
            </section>
            <section class="section static">
               <h1>Boring</h1>
            </section>
            <section class="section parallax bg2">
               <h1>Fluffy Kitten</h1>
            </section>
         </main>
      ...
      </body>
      
      

      Ce code crée trois sections différentes. Deux auront une image en arrière-plan et l'autre aura un arrière-plan statique.

      Au cours des étapes suivantes, vous allez ajouter les styles de chaque section en utilisant les catégories que vous avez ajoutées dans le HTML.

      Étape 3 — Création d'un fichier CSS et ajout du CSS initial

      Au cours de cette étape, vous allez créer un fichier CSS. Ensuite, vous allez ajouter le CSS initial dont vous avez besoin pour formater le site Web et créer l'effet de parallaxe.

      Tout d'abors, créez un fichier styles.css dans votre dossier css-parallax avec la commande nano suivante :

      C'est là que vous allez mettre tout le CSS dont vous avez besoin pour créer l'effet parallaxe avec défilement.

      Ensuite, commencez par la catégorie .wrapper. Ajoutez le code suivant dans votre fichier styles.css :

      css-parallax/styles.css

      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 2px;
      }
      

      La catégorie .wrapper configure les propriétés de perspective et de défilement sur toute la page.

      Pour que l'effet fonctionne, la hauteur de l'habillage doit être configurée sur une valeur fixe. Vous pouvez utiliser l'unité de visualisation vh configurée sur 100 pour obtenir la pleine hauteur de visualisation à l'écran.

      Lorsque vous dimensionnez les images, une barre de défilement horizontale apparaîtra à l'écran. Donc, vous pouvez la désactiver en ajoutant overflow-x: hidden;. La propriété perspective simule la distance de l'unité de visualisation aux pseudo-éléments que vous allez créer et continuer à transformer dans le CSS.

      Au cours de l'étape suivante, vous allez ajouter plus de CSS pour formater votre page Web.

      Étape 4 — Ajout des styles pour la catégorie .section

      Au cours de cette étape, vous allez ajouter des styles à la catégorie .section.

      À l'intérieur de votre fichier styles.css, ajoutez le code suivant en dessous de la catégorie de l'habillage :

      css-parallax/styles.css

      
      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        perspective: 2px;
      }
      .section { 
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      

      La catégorie .section définit les propriétés de taille, d'affichage et de texte des principales sections.

      Configurez la position sur relative pour que l'enfant .parallax::after puisse être exactement positionné par rapport à l'élément parent .section.

      Chaque section dispose d'une view-height(vh) de 100 pour prendre en charge la pleine hauteur de l'unité de visualisation. Vous pouvez modifier et configurer cette valeur comme bon vous semble pour chaque section.

      Enfin, les autres propriétés de CSS permettent de formater et d'ajouter un style au texte dans chaque section. Elles vous permettent de positionner le texte au centre de chaque section et d'ajouter une couleur : white.

      Ensuite, vous allez ajouter un pseudo-élément et le formater pour créer l'effet parallaxe sur deux des sections de votre HTML.

      Étape 5 — Ajout de styles pour la catégorie .parallax

      Au cours de cette étape, vous allez ajouter des styles à la catégorie .parallax.

      Tout d'abord, vous allez ajouter un pseudo-élément dans la catégorie .parallax à formater.

      Remarque : vous pouvez consulter les docs web de MDN pour en savoir plus sur les pseudo-éléments de CSS.

      Ajoutez le code suivant sous la catégorie .section :

      css-parallax/styles.css

      ...
      
      .section {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      ...
      

      La catégorie .parallax ajoute un pseudo-élément ::after à l'image d'arrière-plan et procède aux transformations nécessaires pour l'effet parallaxe.

      Le pseudo-élément est le dernier enfant de l'élément ayant la catégorie .parallax.

      La première moitié du code affiche et positionne le pseudo-élément. La propriété transform écarte le pseudo-élément de la caméra sur z-index, puis elle le rééchelonne pour remplir l'unité de visualisation.

      Comme le pseudo-élément se trouve plus loin, il semble se déplacer plus lentement.

      Au cours de la prochaine étape, vous allez ajouter les images de l'arrière plan et le style de l'arrière-plan statique.

      Étape 6 — Ajout des images et de l'arrière-plan pour chaque section

      Au cours de cette étape, vous allez ajouter les dernières propriétés de CSS pour intégrer les images d'arrière-plan et la couleur de fond de la section statique.

      Tout d'abord, ajoutez une couleur de fond unie à la section .static en utilisant le code suivant après la catégorie .parallax::after :

      css-parallax/styles.css

      ...
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      
      .static {
        background: red;
      }
      ...
      

      La catégorie .static ajoute un arrière-plan à la section statique qui n'a pas d'image.

      Les deux sections portant la catégorie .parallax disposent également d'une catégorie supplémentaire qui est différente pour chacune d'elles. Utilisez les classes .bg1 et .bg2 pour ajouter les images d'arrière-plan de chatons.

      Ajoutez le code suivant à la catégorie .static :

      css-parallax/styles.css

      ...
      
      .static {
        background: red;
      }
      .bg1::after {
        background-image: url('https://placekitten.com/g/900/700');
      }
      
      .bg2::after {
        background-image: url('https://placekitten.com/g/800/600');
      }
      
      ...
      

      Les catégories .bg1, .bg2 ajoutent les images d'arrière-plan correspondant à chaque section.

      Les images proviennent du site web placekitten. Il s'agit d'un service qui met à disposition des photos de chatons que vous pouvez utiliser en tant que supports de présentation.

      Maintenant que tout le code de l'effet parallaxe avec défilement est ajouté, vous pouvez le lier à votre fichier styles.css dans votre index.html.

      Étape 7 — Liaison de styles.css et ouverture de index.html dans votre navigateur

      Au cours de cette étape, vous allez lier votre fichier styles.css et ouvrir le projet dans votre navigateur pour voir l'effet parallaxe avec défilement.

      Tout d'abord, ajoutez le code suivant à la balise <head> dans le fichier index.html :

      css-parallax/index.html

       ...
      <head>
        <meta charset="UTF-8" />
        <^>
        <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
        <^>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Parallax</title>
      </head>
      
      ...
      

      Maintenant, vous pouvez ouvrir votre fichier index.html dans votre navigateur :

      GIF illustrant l'effet parallaxe avec défilement

      C'est fait, vous avez configuré une page web avec un effet de défilement qui fonctionne. Consultez ce référentiel GitHub pour voir le code complet.

      Conclusion

      Grâce à cet article, vous avez configuré un projet avec un fichier index.html et styles.css et vous disposez maintenant d'une page Web fonctionnelle. Vous y avez ajouté la structure de votre page Web et créé les styles des diverses sections du site.

      Vous pouvez éloigner les images ou l'effet parallaxe que vous utilisez pour qu'ils se déplacent plus lentement. Il vous faudra modifier la quantité de pixels sur perspective et les propriétés transform. Si vous ne souhaitez pas que l'image d'arrière-plan défile, utilisez background-attachment: fixed; au lieu de perspective/translate/scale.



      Source link