1
00:00:02,310 --> 00:00:04,600
Maintenant, vous remarquerez une chose.

2
00:00:05,590 --> 00:00:10,710
Si vous entrez un objectif ici et ici, j'utiliserai rapidement le même objectif encore et

3
00:00:10,720 --> 00:00:12,000
encore, même si

4
00:00:12,040 --> 00:00:17,120
cela me donne une erreur, mais l'application continuera de fonctionner, alors ignorons l'avertissement en bas.

5
00:00:17,140 --> 00:00:22,690
Si je saisis ceci, assez souvent vous voyez à un moment donné, nous dépasserons les limites de l'écran

6
00:00:22,720 --> 00:00:25,270
mais par défaut, vous ne pouvez pas faire

7
00:00:25,400 --> 00:00:29,800
défiler et c'est quelque chose qui peut être vraiment déroutant si vous commencez avec

8
00:00:29,800 --> 00:00:31,890
React Native car si vous venez du

9
00:00:31,930 --> 00:00:38,650
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

10
00:00:38,650 --> 00:00:40,720
la page. Ici, ce

11
00:00:40,750 --> 00:00:42,300
n'est pas la même

12
00:00:42,340 --> 00:00:48,500
chose, vous ne faites pas défiler simplement parce que votre contenu dépasse les limites de votre

13
00:00:48,520 --> 00:00:52,380
écran, mais votre contenu n'est tout simplement plus accessible.

14
00:00:52,420 --> 00:00:56,530
Maintenant, évidemment, ce n'est pas une option, c'est une expérience utilisateur horrible, nous

15
00:00:56,530 --> 00:01:04,330
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

16
00:01:04,540 --> 00:01:08,410
doit être défilante et c'est la même chose dans React Native donc.

17
00:01:08,440 --> 00:01:16,060
Donc ici, ce que nous pouvons faire, c'est que nous pouvons utiliser un autre composant cuit React Native et c'est la vue

18
00:01:16,060 --> 00:01:20,710
de défilement et comme son nom l'indique, c'est une vue qui peut défiler.

19
00:01:20,710 --> 00:01:29,360
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

20
00:01:29,370 --> 00:01:31,980
de le configurer, vous pouvez simplement placer votre

21
00:01:32,010 --> 00:01:38,020
curseur ici et frapper l'espace de contrôle pour avoir une idée de ce que vous pouvez définir ou

22
00:01:38,020 --> 00:01:39,390
consulter les documents officiels,

23
00:01:39,390 --> 00:01:45,150
par exemple, vous pouvez définir horizontal sur faites défiler horizontalement mais ici, je vais laisser la valeur par

24
00:01:45,150 --> 00:01:53,240
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,

25
00:01:53,240 --> 00:01:54,430
alors laissez-moi

26
00:01:54,740 --> 00:02:02,420
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

27
00:02:02,420 --> 00:02:04,760
est enveloppée dans la vue de défilement.

28
00:02:04,850 --> 00:02:10,850
Nous aurions pu l'enrouler sur toute la page, nous aurions donc pu remplacer cette vue ici par une vue

29
00:02:10,850 --> 00:02:15,250
de défilement ou envelopper par une vue de défilement, de sorte que cela fonctionnerait

30
00:02:16,180 --> 00:02:20,770
également, c'est aussi quelque chose que nous pouvons faire, puis la page entière est

31
00:02:20,820 --> 00:02:24,020
défilable, donc si j'ajoute maintenant apprendre React Native ici, vous

32
00:02:27,950 --> 00:02:33,280
verrez que maintenant la page entière défile, ici sur iOS vous pouvez même faire défiler sans éléments,

33
00:02:33,280 --> 00:02:40,600
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

34
00:02:40,600 --> 00:02:46,150
ici, je veux juste avoir une sous-section de l'écran qui peut défiler, donc je n'enveloppe que cette section

35
00:02:46,150 --> 00:02:47,170
avec la

36
00:02:47,170 --> 00:02:53,290
vue de défilement, mais c'est bien sûr un composant super important pour tout contenu où vous ne pouvez pas garantir

37
00:02:53,290 --> 00:02:55,040
qu'il tient sur le écran.

38
00:02:55,100 --> 00:02:59,650
Maintenant, bien sûr, vous pourriez penser qu'avec toutes ces tailles d'appareils disponibles, vous ne pouvez jamais

39
00:03:00,250 --> 00:03:04,810
le garantir, mais il existe certains éléments de contenu, comme une entrée et un bouton que

40
00:03:04,810 --> 00:03:10,780
vous pourrez toujours adapter à l'écran et qui peuvent également être configuré pour se redimensionner pour s'adapter à l'écran, alors qu'il

41
00:03:10,780 --> 00:03:16,000
existe d'autres contenus, généralement des listes de données comme celle-ci ici où vous ne pouvez pas le garantir et

42
00:03:16,000 --> 00:03:21,760
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

43
00:03:21,850 --> 00:03:27,770
que vous souhaitez intégrer dans une vue de défilement. D'autres contenus tels que les boutons de saisie, le

44
00:03:27,940 --> 00:03:29,040
texte statique codé

45
00:03:29,140 --> 00:03:35,290
en dur, donc essentiellement tout contenu où vous savez combien d'éléments vous aurez à l'avance peut généralement être compressé sur

46
00:03:35,320 --> 00:03:42,340
un écran avec les bons outils, à savoir avec flexbox qui fera également tout au long de ce cours, mais pour un

47
00:03:42,340 --> 00:03:46,360
contenu généré dynamiquement comme celui-ci, vous voulez certainement une vue de défilement.