1
00:00:02,310 --> 00:00:04,600
Jetzt gibt es eine Sache, die Sie bemerken werden.

2
00:00:05,590 --> 00:00:10,710
Wenn Sie hier und hier ein Ziel eingeben, werde ich das gleiche Ziel schnell und immer

3
00:00:10,720 --> 00:00:12,000
wieder verwenden, obwohl

4
00:00:12,040 --> 00:00:17,120
mir dies einen Fehler gibt, die App jedoch weiterhin funktioniert. Ignorieren wir also die Warnung unten.

5
00:00:17,140 --> 00:00:22,690
Wenn ich dies eingegeben habe, werden wir oft genug die Bildschirmgrenzen überschreiten, aber standardmäßig können

6
00:00:22,720 --> 00:00:25,270
Sie nicht scrollen, und das kann sehr

7
00:00:25,400 --> 00:00:29,800
verwirrend sein, wenn Sie mit React Native beginnen Wenn Sie aus

8
00:00:29,800 --> 00:00:31,890
dem Internet kommen, können Sie

9
00:00:31,930 --> 00:00:38,650
dort jederzeit einen Bildlauf durchführen. Der Browser macht Ihre Seite standardmäßig scrollbar, wenn Ihr Inhalt die Grenzen der

10
00:00:38,650 --> 00:00:40,720
Seite überschreitet. Hier ist

11
00:00:40,750 --> 00:00:42,300
das nicht dasselbe,

12
00:00:42,340 --> 00:00:48,500
Sie werden nicht gescrollt, nur weil Ihr Inhalt die Grenzen Ihres Bildschirms überschreitet,

13
00:00:48,520 --> 00:00:52,380
sondern Ihr Inhalt einfach nicht mehr erreichbar ist.

14
00:00:52,420 --> 00:00:56,530
Das ist natürlich keine Option, das ist eine schreckliche Benutzererfahrung. Wir möchten

15
00:00:56,530 --> 00:01:04,330
einen scrollbaren Inhalt haben, aber in nativen Apps muss explizit angegeben werden, dass diese Seite oder ein Teil dieser Seite scrollbar sein

16
00:01:04,540 --> 00:01:08,410
sollte und dass es dieselbe ist in React Native daher.

17
00:01:08,440 --> 00:01:16,060
Hier können wir also eine andere Komponente verwenden, die React Native gebacken hat, und das ist die Bildlaufansicht. Wie

18
00:01:16,060 --> 00:01:20,710
der Name schon sagt, ist dies eine Ansicht, die scrollbar ist.

19
00:01:20,710 --> 00:01:29,360
Jetzt können wir diese Ansicht hier, die unsere Listenelemente enthält, durch die Bildlaufansicht ersetzen. In der Bildlaufansicht haben Sie auch Eigenschaften, mit denen Sie sie konfigurieren

20
00:01:29,370 --> 00:01:31,980
können. Sie können einfach Ihren Cursor hier

21
00:01:32,010 --> 00:01:38,020
platzieren und auf die Kontrolltaste drücken, um eine Vorstellung davon zu bekommen, was Sie einstellen können, oder

22
00:01:38,020 --> 00:01:39,390
die offiziellen Dokumente überprüfen,

23
00:01:39,390 --> 00:01:45,150
auf die Sie beispielsweise horizontal einstellen könnten horizontal scrollen, aber hier lasse ich die Standardeinstellung, die

24
00:01:45,150 --> 00:01:53,240
vertikales Scrollen ist, und wenn Sie dies nur hinzufügen, werden Sie sehen, dass, wenn ich hier ein Dutzend Mal "Learn React Native" hinzufüge,

25
00:01:53,240 --> 00:01:54,430
ich diese

26
00:01:54,740 --> 00:02:02,420
Seite ausfüllen kann, jetzt ist dies wie Sie scrollbar kann sehen, ich kann jetzt meinen Inhalt und nur den Teil scrollen,

27
00:02:02,420 --> 00:02:04,760
der in der Bildlaufansicht eingeschlossen ist.

28
00:02:04,850 --> 00:02:10,850
Wir hätten es um die gesamte Seite wickeln können, also hätten wir diese Ansicht hier durch eine Bildlaufansicht ersetzen

29
00:02:10,850 --> 00:02:15,250
oder durch eine Bildlaufansicht umbrechen können, damit das auch funktioniert. Es ist auch etwas,

30
00:02:16,180 --> 00:02:20,770
was wir tun können, und dann ist die gesamte Seite scrollbar. Wenn ich jetzt

31
00:02:20,820 --> 00:02:24,020
hier Learn React Native hinzufüge, werden Sie sehen, dass jetzt

32
00:02:27,950 --> 00:02:33,280
die gesamte Seite gescrollt wird. Hier unter iOS können Sie sogar ohne Elemente scrollen. Dies ist das

33
00:02:33,280 --> 00:02:40,600
Standardverhalten von iOS, aber es springt natürlich immer zurück, aber es liegt an Ihnen, wo Sie sich befinden füge dies hinzu und hier

34
00:02:40,600 --> 00:02:46,150
möchte ich nur einen Unterabschnitt des Bildschirms haben, der scrollbar ist, so dass ich diesen Abschnitt nur

35
00:02:46,150 --> 00:02:47,170
mit der

36
00:02:47,170 --> 00:02:53,290
Bildlaufansicht umschließe, aber dies ist natürlich eine super wichtige Komponente für alle Inhalte, bei denen du nicht garantieren kannst, dass

37
00:02:53,290 --> 00:02:55,040
sie auf den passen Bildschirm.

38
00:02:55,100 --> 00:02:59,650
Jetzt könnten Sie natürlich denken, dass Sie bei all diesen verfügbaren Gerätegrößen dies niemals garantieren können,

39
00:03:00,250 --> 00:03:04,810
aber es gibt bestimmte Inhalte wie eine Eingabe und eine Schaltfläche, die Sie immer auf den

40
00:03:04,810 --> 00:03:10,780
Bildschirm passen können und die es auch sein können konfiguriert, um die Größe so zu ändern, dass sie auf den Bildschirm

41
00:03:10,780 --> 00:03:16,000
passt, während es andere Inhalte gibt, normalerweise Listen mit Daten wie diesen hier, bei denen Sie dies nicht garantieren

42
00:03:16,000 --> 00:03:21,760
können und bei denen Sie erst nach 10 oder 20 Elementen wissen, dass sie definitiv jeden Bildschirm überschreiten und das ist

43
00:03:21,850 --> 00:03:27,770
der Inhalte, die Sie in eine Bildlaufansicht einbinden möchten. Andere Inhalte wie Eingabeschaltflächen, fest codierter statischer Text,

44
00:03:27,940 --> 00:03:29,040
sodass im

45
00:03:29,140 --> 00:03:35,290
Grunde jeder Inhalt, bei dem Sie wissen, wie viele Elemente Sie im Voraus haben, normalerweise mit den

46
00:03:35,320 --> 00:03:42,340
richtigen Werkzeugen auf einen Bildschirm gedrückt werden kann, nämlich mit der Flexbox, die auch während dieses Kurses funktioniert Bei dynamisch

47
00:03:42,340 --> 00:03:46,360
generierten Inhalten wie diesen möchten Sie auf jeden Fall eine Bildlaufansicht.