Maintenant, vous remarquerez une chose.
Si vous entrez un objectif ici et ici, j'utiliserai rapidement le même objectif encore et
encore, même si
cela me donne une erreur, mais l'application continuera de fonctionner, alors ignorons l'avertissement en bas.
Si je saisis ceci, assez souvent vous voyez à un moment donné, nous dépasserons les limites de l'écran
mais par défaut, vous ne pouvez pas faire
défiler et c'est quelque chose qui peut être vraiment déroutant si vous commencez avec
React Native car si vous venez du
web, là, vous pouvez toujours faire défiler, le navigateur par défaut rend votre page défilable si votre contenu dépasse les limites de
la page. Ici, ce
n'est pas la même
chose, vous ne faites pas défiler simplement parce que votre contenu dépasse les limites de votre
écran, mais votre contenu n'est tout simplement plus accessible.
Maintenant, évidemment, ce n'est pas une option, c'est une expérience utilisateur horrible, nous
voulons avoir un contenu défilable mais dans les applications natives, vous devez être explicite sur le fait que cette page ou une partie de cette page
doit être défilante et c'est la même chose dans React Native donc.
Donc ici, ce que nous pouvons faire, c'est que nous pouvons utiliser un autre composant cuit React Native et c'est la vue
de défilement et comme son nom l'indique, c'est une vue qui peut défiler.
Alors maintenant, nous pouvons remplacer cette vue ici qui contient nos éléments de liste avec la vue de défilement. Sur la vue de défilement, vous avez également des propriétés qui vous permettent
de le configurer, vous pouvez simplement placer votre
curseur ici et frapper l'espace de contrôle pour avoir une idée de ce que vous pouvez définir ou
consulter les documents officiels,
par exemple, vous pouvez définir horizontal sur faites défiler horizontalement mais ici, je vais laisser la valeur par
défaut qui est le défilement vertical et en ajoutant simplement cela, vous verrez que maintenant si j'ajoute apprendre React Native une douzaine de fois ici,
alors laissez-moi
remplir cette page, maintenant ceci est défilable comme vous peut voir, je peux maintenant faire défiler mon contenu et seulement la partie qui
est enveloppée dans la vue de défilement.
Nous aurions pu l'enrouler sur toute la page, nous aurions donc pu remplacer cette vue ici par une vue
de défilement ou envelopper par une vue de défilement, de sorte que cela fonctionnerait
également, c'est aussi quelque chose que nous pouvons faire, puis la page entière est
défilable, donc si j'ajoute maintenant apprendre React Native ici, vous
verrez que maintenant la page entière défile, ici sur iOS vous pouvez même faire défiler sans éléments,
c'est le comportement par défaut d'iOS mais bien sûr, il rebondit toujours mais c'est à vous de décider où vous ajoutez ceci et
ici, je veux juste avoir une sous-section de l'écran qui peut défiler, donc je n'enveloppe que cette section
avec la
vue de défilement, mais c'est bien sûr un composant super important pour tout contenu où vous ne pouvez pas garantir
qu'il tient sur le écran.
Maintenant, bien sûr, vous pourriez penser qu'avec toutes ces tailles d'appareils disponibles, vous ne pouvez jamais
le garantir, mais il existe certains éléments de contenu, comme une entrée et un bouton que
vous pourrez toujours adapter à l'écran et qui peuvent également être configuré pour se redimensionner pour s'adapter à l'écran, alors qu'il
existe d'autres contenus, généralement des listes de données comme celle-ci ici où vous ne pouvez pas le garantir et
où vous savez juste après 10 ou 20 éléments, il dépassera certainement n'importe quel écran et c'est le le contenu
que vous souhaitez intégrer dans une vue de défilement. D'autres contenus tels que les boutons de saisie, le
texte statique codé
en dur, donc essentiellement tout contenu où vous savez combien d'éléments vous aurez à l'avance peut généralement être compressé sur
un écran avec les bons outils, à savoir avec flexbox qui fera également tout au long de ce cours, mais pour un
contenu généré dynamiquement comme celui-ci, vous voulez certainement une vue de défilement.