1
00:00:02,230 --> 00:00:08,100
Dalam kuliah ini, saya ingin menyelami sedikit lebih dalam ke dalam flexbox, terutama mengenai bagaimana Anda menggunakannya dalam aplikasi React

2
00:00:08,110 --> 00:00:08,690
Native.

3
00:00:08,710 --> 00:00:12,310
Jika Anda sudah mengetahui semua itu, tentu saja Anda dapat melewatkan kuliah ini.

4
00:00:12,340 --> 00:00:14,920
Jadi untuk ini, saya menyiapkan aplikasi boneka sederhana dan tentu saja Anda menemukan

5
00:00:14,920 --> 00:00:20,420
bahwa terlampir, itu adalah aplikasi asli React Native yang dibangun dengan expo dan dalam aplikasi. File js di sini, apa yang saya

6
00:00:20,460 --> 00:00:26,890
miliki pada akhirnya hanyalah tampilan dengan tiga tampilan di sana di mana setiap tampilan kemudian memiliki teks

7
00:00:26,890 --> 00:00:29,990
dengan teks satu, dua, tiga, ini hanya membuat

8
00:00:30,010 --> 00:00:36,310
beberapa kotak dengan warna yang berbeda - merah, biru dan hijau dan sekarang kami akan menggunakan flexbox

9
00:00:36,310 --> 00:00:41,950
untuk memindahkan kotak-kotak ini sehingga Anda bisa merasakan bagaimana flexbox bekerja karena itu sangat penting.

10
00:00:42,240 --> 00:00:43,240
Sekarang hal

11
00:00:43,660 --> 00:00:49,120
pertama yang pertama, secara default setiap tampilan di Bereaksi Asli, bahkan jika Anda menetapkan

12
00:00:49,120 --> 00:00:55,410
tidak ada gaya khusus menggunakan flexbox dan itu berbeda dengan web misalnya, di sana jika Anda

13
00:00:55,420 --> 00:01:01,370
memiliki div yang akan setara dengan jenis tampilan, itu tidak dapat menggunakan flexbox secara default.

14
00:01:01,450 --> 00:01:08,260
Dalam React Native, memang, setiap tampilan secara default mengatur anak-anaknya dengan bantuan hal flexbox ini,

15
00:01:08,350 --> 00:01:15,490
flexbox hanyalah sebuah istilah, hanyalah sebuah konsep dari CSS yang semuanya tentang pengorganisasian elemen anak dalam

16
00:01:15,520 --> 00:01:17,440
ruang satu dimensi, jadi

17
00:01:17,440 --> 00:01:21,990
di sini misalnya di kolom. Itu juga merupakan standar lain,

18
00:01:21,990 --> 00:01:29,340
tidak hanya setiap tampilan secara default menggunakan flexbox, tetapi juga secara default mengatur anak-anak dalam kolom, jadi

19
00:01:29,340 --> 00:01:33,020
dari atas ke bawah. Itu juga perbedaan untuk web dan

20
00:01:33,020 --> 00:01:37,350
saya tidak ingin terlalu menekankan perbedaan ini karena tentu saja Anda tidak perlu menjadi pengembang

21
00:01:37,350 --> 00:01:42,400
web untuk membangun aplikasi Bereaksi Asli tapi saya pikir banyak orang tahu pengembangan web, lakukan tahu flexbox CSS

22
00:01:42,400 --> 00:01:47,400
dan karena itu masuk akal juga berbicara tentang perbedaan. Jadi di web saat Anda menggunakan flexbox,

23
00:01:47,400 --> 00:01:48,840
tidak hanya itu

24
00:01:48,840 --> 00:01:51,220
tidak dinyalakan secara default, selain itu

25
00:01:51,240 --> 00:01:56,820
jika Anda mengaktifkannya, defaultnya adalah untuk mengatur semua elemen anak dalam satu baris dan di

26
00:01:56,820 --> 00:01:59,010
sini, defaultnya adalah mengaturnya dalam kolom.

27
00:01:59,010 --> 00:02:05,910
Anda dapat mengubah default itu, jadi dalam kasus ini pada tampilan yang menampung kotak saya, dengan menambahkan arah fleksibel

28
00:02:05,910 --> 00:02:12,960
di sini dan mengatur ini ke baris misalnya, sekarang Anda akan melihat bahwa tiga kotak ini disusun dalam satu baris

29
00:02:12,960 --> 00:02:16,560
dari kiri ke kanan. Sekarang selain baris dan

30
00:02:16,560 --> 00:02:19,250
kolom, Anda juga memiliki baris terbalik dan kolom

31
00:02:19,260 --> 00:02:21,720
mundur dan ini hanya melakukan apa namanya.

32
00:02:21,720 --> 00:02:29,010
Sekarang kita masih memiliki baris tetapi elemen pertama, kotak merah sebenarnya ada di kanan dan tidak di kiri lagi, jadi

33
00:02:29,010 --> 00:02:30,820
itu juga sesuatu yang

34
00:02:30,840 --> 00:02:36,210
bisa Anda lakukan, biarkan saya kembali ke baris. Jadi itulah hal pertama yang bisa Anda lakukan.

35
00:02:36,210 --> 00:02:42,750
Satu hal penting tentang flexbox adalah bagaimana elemen anak berukuran, di sini saya

36
00:02:42,810 --> 00:02:47,040
memberi setiap elemen anak lebar dan tinggi 100.

37
00:02:47,070 --> 00:02:54,660
Sekarang jika kita akan menghapus hal lebar dan tinggi pada setiap elemen anak, maka Anda akan melihat bahwa sekarang

38
00:02:54,660 --> 00:03:01,890
kita memiliki baris yang sangat kecil di sini karena setiap kotak sekarang hanya selebar yang diperlukan oleh anak

39
00:03:01,890 --> 00:03:05,700
itu dan hanya setinggi anaknya. mengharuskan demikian, jadi setiap

40
00:03:05,700 --> 00:03:11,180
kotak di sini yang memegang nomor hanya selebar dan setinggi jumlah yang dikandungnya.

41
00:03:11,340 --> 00:03:18,180
Sekarang Anda dapat mengubahnya dengan wadah flexbox di sekitarnya juga. Mari kita beri lebar katakanlah 300

42
00:03:18,330 --> 00:03:22,740
piksel atau 80% dari lebar induk, jadi dalam hal

43
00:03:22,740 --> 00:03:28,950
ini karena itu adalah elemen root, dari lebar perangkat dan mari beri ketinggian

44
00:03:29,020 --> 00:03:30,230
katakanlah 300.

45
00:03:30,480 --> 00:03:36,720
Jika kita melakukan itu dan sekarang sangat penting, saya melakukan ini pada tampilan yang menampung semua

46
00:03:36,720 --> 00:03:39,380
kotak ini, saya tidak melakukannya sendiri.

47
00:03:39,480 --> 00:03:45,050
Jadi, jika kita menetapkan lebar dan tinggi ini pada kotak di sekitarnya, Anda

48
00:03:45,150 --> 00:03:48,250
melihat sesuatu yang menarik, tinggi diasumsikan untuk

49
00:03:48,270 --> 00:03:54,810
semua elemen, sekarang semua tampilan di kotak flex mengambil ketinggian induk, lebar tidak berdampak di sini.

50
00:03:54,870 --> 00:03:59,510
Itu juga perilaku default yang Anda dapatkan di sini, jelas karena kami belum mengubah apa pun.

51
00:03:59,760 --> 00:04:06,840
Perilaku default di sini memang adalah bahwa elemen anak dalam kotak flex, jadi dalam

52
00:04:06,850 --> 00:04:15,360
tampilan luar di sini, diatur sedemikian rupa sehingga mereka menyelaraskan diri di sepanjang sumbu silang dengan meregangkan.

53
00:04:15,490 --> 00:04:20,510
Oke, itu banyak istilah, apa artinya ini? Sekarang ketika bekerja

54
00:04:20,530 --> 00:04:29,290
dengan flexbox, kami memiliki dua sumbu penting. Sumbu utama tergantung pada arah fleks Anda, untuk baris yang kami miliki di

55
00:04:29,350 --> 00:04:37,690
sini, baris arah fleks, sumbu utama adalah dari kiri ke kanan. Untuk baris terbalik, itu akan kanan ke kiri, untuk kolom, itu akan menjadi

56
00:04:37,690 --> 00:04:42,570
atas ke bawah dan untuk kolom mundur, itu akan menjadi bawah ke atas, jadi itu

57
00:04:42,580 --> 00:04:44,270
sumbu utama dan kemudian

58
00:04:44,620 --> 00:04:48,630
Anda juga memiliki sumbu silang dan itu hanya kebalikannya dari sumbu utama.

59
00:04:48,640 --> 00:04:56,110
Jadi untuk baris di mana sumbu utama dari kiri ke kanan, sumbu silang akan dari atas ke bawah. Jika sumbu utama dari kanan ke kiri yang

60
00:04:56,110 --> 00:05:01,900
akan menjadi kasus untuk baris terbalik, maka sumbu silang akan dari bawah

61
00:05:01,900 --> 00:05:03,100
ke atas.

62
00:05:03,340 --> 00:05:06,940
Oke, jadi itulah konsep poros utama dan poros silang.

63
00:05:06,940 --> 00:05:13,060
Sekarang Anda dapat mengatur elemen anak Anda, jadi dalam pandangan ini di mana kami memiliki tiga kotak sebagai elemen anak,

64
00:05:13,360 --> 00:05:20,170
Anda dapat mengatur elemen anak ini di sepanjang sumbu ini. Anda menggunakan konten yang dibenarkan untuk mengatur

65
00:05:20,200 --> 00:05:27,760
elemen di sepanjang sumbu utama dan Anda harus menyelaraskan item untuk mengatur elemen di sekitar sumbu silang.

66
00:05:27,760 --> 00:05:31,040
Sekarang Anda melihat nilai yang Anda dapatkan untuk membenarkan konten di sini jika Anda menambahkan

67
00:05:31,090 --> 00:05:37,230
kutipan ini atau jika Anda meletakkan kursor di sana dan Anda menekan ruang kontrol. Anda melihat Anda dapat memusatkan elemen, Anda

68
00:05:37,230 --> 00:05:44,040
dapat memposisikannya di akhir atau di awal wadah itu atau Anda dapat menambahkan beberapa ruang di

69
00:05:44,040 --> 00:05:45,270
antaranya, misalnya

70
00:05:45,300 --> 00:05:52,500
jika kita menggunakan ruang di antara sini dan kami menggunakan menyelaraskan pusat item, maka semuanya akan berubah.

71
00:05:52,500 --> 00:05:57,490
Sekarang Anda akan melihat ada mengambil lebar wadah sekitarnya, setiap kotak itu

72
00:05:57,540 --> 00:06:03,360
sendiri masih cukup kecil tetapi mereka terbelah atau mereka didistribusikan melintasi lebar wadah induk

73
00:06:03,360 --> 00:06:09,570
dan mereka tidak lagi mengambil ketinggian karena sepanjang salib sumbu, kami menyelaraskannya dengan menyelaraskan item

74
00:06:09,570 --> 00:06:12,960
dan di sana, saya mengatur ini ke pusat.

75
00:06:13,020 --> 00:06:19,620
Default di sini adalah peregangan dan jika saya atur kembali ke peregangan, maka tidak mengejutkan mereka melakukan peregangan

76
00:06:19,620 --> 00:06:20,960
untuk seluruh ketinggian.

77
00:06:20,970 --> 00:06:26,490
Sekarang jika Anda ingin memastikan bahwa mereka mengambil lebar yang tersedia, Anda tidak dapat mengatur peregangan di

78
00:06:26,490 --> 00:06:32,820
sini pada konten justifikasi yang merupakan kendaraan penentuan posisi sumbu utama Anda, jadi Anda tidak dapat mengatur peregangan di sini.

79
00:06:32,980 --> 00:06:35,880
Jadi apa yang dapat Anda lakukan mengenai hal itu?

80
00:06:35,890 --> 00:06:40,780
Nah, itu adalah sesuatu yang sekarang Anda konfigurasikan pada setiap item anak itu sendiri.

81
00:06:40,810 --> 00:06:50,290
Anda bisa memberi tahu item anak berapa banyak ruang yang seharusnya diambil dari ruang yang berpotensi didapatnya. Peregangan di sini adalah semacam kasus khusus, di sana Anda

82
00:06:50,290 --> 00:06:54,220
mengatur ini pada item induk, biasanya Anda mengatur

83
00:06:54,220 --> 00:06:56,640
ini pada item anak.

84
00:06:56,680 --> 00:07:02,200
Jadi misalnya jika saya mengatur ini ke tengah sekarang sehingga orang tua tidak memberi tahu anak

85
00:07:02,200 --> 00:07:08,950
berapa banyak ruang yang harus diambil, maka kita dapat sepenuhnya mengontrol ruang yang dibutuhkan anak dengan pergi ke gaya

86
00:07:08,950 --> 00:07:17,410
anak dan di sana, Anda dapat menambahkan flex , properti lentur. Properti flex diterapkan ke item yang ada di dalam kotak flex, sehingga

87
00:07:17,410 --> 00:07:19,730
ada di dalam tampilan dalam kasus

88
00:07:19,810 --> 00:07:25,660
ini di sini dan itu bisa menjadi tampilan itu sendiri tetapi itu juga bisa menjadi komponen lain

89
00:07:25,660 --> 00:07:27,150
seperti teks misalnya.

90
00:07:27,160 --> 00:07:31,320
Jadi sekarang di sini, Anda dapat menambahkan flex dan Anda dapat mengatur ini ke nilai

91
00:07:31,330 --> 00:07:35,940
satu misalnya, jadi flex harus berupa angka. Jika Anda mengatur ini menjadi satu, apa

92
00:07:35,950 --> 00:07:44,050
yang akan Anda lihat adalah bahwa sekarang wadah merah tempat saya menyetel flex ke 1 mengambil semua lebar yang tersedia sehingga bisa mendapatkan begitu

93
00:07:44,110 --> 00:07:50,440
banyak sehingga menyisakan ruang yang cukup untuk wadah biru dan hijau sehingga mereka dapat memeras konten mereka ke

94
00:07:50,620 --> 00:07:52,470
dalam flexbox di sekitarnya.

95
00:07:52,480 --> 00:07:58,360
Sekarang kita tidak bisa melihat batas-batas wadah di sekitarnya tetapi batas-batas pada dasarnya akan menjadi tempat item

96
00:07:58,600 --> 00:08:03,060
merah dimulai dan item hijau dan sebagainya pada sumbu horizontal di sini.

97
00:08:04,720 --> 00:08:11,020
Jadi sekarang flex satu memastikan bahwa item merah mendapat sebesar mungkin,

98
00:08:11,170 --> 00:08:17,140
sehingga dibutuhkan ruang sebanyak mungkin. Secara default, tampilan hanya mengambil ruang sebanyak yang dibutuhkan elemen anak

99
00:08:17,140 --> 00:08:17,690
mereka,

100
00:08:17,710 --> 00:08:24,040
jadi karena karakter yang satu ini diperlukan tetapi dengan karakter yang fleksibel, Anda mengubahnya dan mereka sekarang mengambil ruang sebanyak di sepanjang

101
00:08:24,040 --> 00:08:25,140
sumbu utama, jadi sepanjang

102
00:08:25,150 --> 00:08:29,140
lebar di sini, karena mereka dapat Dapatkan. Untuk sumbu silang, sekali lagi itu

103
00:08:29,140 --> 00:08:34,310
kasus khusus, Anda harus melakukan ini pada orang tua. Untuk sumbu utama dan karena kami

104
00:08:34,360 --> 00:08:38,790
memiliki baris di sini, sumbu utama adalah sumbu horizontal dari kiri ke kanan,

105
00:08:38,800 --> 00:08:41,520
Anda melakukan ini dengan properti flex pada anak.

106
00:08:42,700 --> 00:08:48,550
Sekarang tentu saja Anda dapat menambahkan flex ke elemen anak lain juga, seperti yang kedua ke wadah biru dengan

107
00:08:48,550 --> 00:08:50,260
dua di sana, Anda

108
00:08:50,260 --> 00:08:52,420
dapat menambahkan flex satu di sana juga.

109
00:08:52,420 --> 00:08:56,690
Jadi sekarang saya punya flex satu pada container merah dan flex

110
00:08:56,710 --> 00:09:03,790
satu pada container biru dan yang sekarang terjadi adalah keduanya mengambil ruang kosong yang tersedia dan di antara dua

111
00:09:03,790 --> 00:09:08,870
kotak ini, ruang didistribusikan secara merata dan itulah yang ditunjukkan angka ini di sini.

112
00:09:08,930 --> 00:09:11,210
Angka ini adalah angka relatif,

113
00:09:11,210 --> 00:09:18,350
semua item dalam kotak yang sama, dengan properti flex mendistribusikan ruang yang tersedia dengan mempertimbangkan nomor yang

114
00:09:18,410 --> 00:09:23,130
Anda tetapkan di sini dan angka-angka ini relatif satu sama lain.

115
00:09:23,140 --> 00:09:29,800
Jadi, jika saya memberikan dua wadah biru melenturkan sini, maka ini berarti bahwa dari ruang yang tersedia yang Anda miliki

116
00:09:29,950 --> 00:09:36,100
di wadah sekitarnya, setelah mengurangi ruang setiap elemen perlu memeras isinya di sana, wadah biru akan memakan ruang

117
00:09:36,100 --> 00:09:36,840
dua

118
00:09:36,970 --> 00:09:42,480
kali lebih banyak dari yang satu ini karena di sini kita punya satu flex, di sini

119
00:09:42,490 --> 00:09:43,760
kita punya flex dua,

120
00:09:43,810 --> 00:09:50,560
jika kita punya flex tiga di sini, maka ini akan mengambil tiga perlima dari ruang kosong yang tersedia karena kita punya

121
00:09:50,560 --> 00:09:52,150
tiga tambah dua, jadi kita

122
00:09:52,210 --> 00:09:58,300
punya 5 segmen yang tersedia sehingga bisa dikatakan dan di sini wadah merah akan mengambil 3 segmen, wadah

123
00:09:58,300 --> 00:09:59,950
biru akan mengambil 2 segmen.

124
00:09:59,950 --> 00:10:05,950
Jika kita memiliki 1 dan 2, maka kita memiliki tiga segmen yang tersedia dan wadah

125
00:10:06,070 --> 00:10:13,510
biru mengambil dua, merah mengambil satu, sehingga Anda selalu menambahkan angka-angka fleksibel ini dan kemudian mendistribusikan atau itu secara otomatis

126
00:10:13,510 --> 00:10:17,680
dilakukan tentu saja tetapi kemudian ruang yang tersedia didistribusikan demikian.

127
00:10:17,680 --> 00:10:22,660
Jadi sekarang di sini, kita akan melihat bahwa wadah biru dua kali lebih besar dari yang merah atau dibutuhkan

128
00:10:22,660 --> 00:10:25,090
dua kali lebih banyak ruang kosong daripada yang merah.

129
00:10:25,090 --> 00:10:27,090
Jadi ini adalah bagaimana Anda

130
00:10:27,130 --> 00:10:33,760
dapat bekerja dengan flex, Anda dapat mengatur bagaimana item diposisikan dengan arah flex, dengan membenarkan konten dan dengan

131
00:10:33,790 --> 00:10:39,370
menyelaraskan item dan Anda juga dapat membuat item Anda tumbuh dan menyusut dengan bantuan flex.

132
00:10:39,430 --> 00:10:44,490
Jadi sekarang itu pengantar singkat untuk flexbox di React Native, seperti yang saya katakan

133
00:10:44,560 --> 00:10:51,070
terinspirasi oleh Flexbox untuk CSS, jadi jika Anda tahu itu, semua yang saya jelaskan di sini mungkin bukan hal

134
00:10:51,070 --> 00:10:52,280
baru bagi Anda.

135
00:10:52,450 --> 00:10:54,610
Kami akan bekerja dengan flexbox sepanjang kursus

136
00:10:54,610 --> 00:10:58,900
ini, jadi ada hal-hal yang juga akan menjadi lebih jelas dan kami akan banyak

137
00:10:58,930 --> 00:11:05,170
bekerja dengannya dan Anda akan melihat bagaimana Anda dapat membuat antarmuka pengguna yang indah dengan flexbox, flexbox pada akhirnya adalah alat dalam

138
00:11:05,170 --> 00:11:10,570
React Asli untuk struktur konten Anda pada halaman, untuk mengatur konten Anda dan Anda biasanya akan bekerja dengan banyak

139
00:11:10,570 --> 00:11:15,190
pandangan yang Anda juga bersarang sehingga Anda dapat memposisikan elemen seperti yang Anda inginkan karena tentu

140
00:11:15,190 --> 00:11:16,720
saja dan itu juga

141
00:11:16,840 --> 00:11:21,680
penting, Anda tidak perlu hanya perlu memiliki satu tampilan di aplikasi Anda yang menggunakan flexbox, Anda bisa

142
00:11:21,730 --> 00:11:26,050
memiliki tampilan lain di sana yang juga menggunakan flexbox dan sebenarnya seperti yang saya sebutkan,

143
00:11:26,050 --> 00:11:31,570
setiap tampilan secara default menggunakan flexbox dan Anda kemudian dapat menyatukan pandangan-pandangan ini satu sama lain sehingga Anda memposisikan

144
00:11:31,600 --> 00:11:35,070
semua seperti yang Anda inginkan dan Anda juga akan melihat ini

145
00:11:35,140 --> 00:11:41,200
dalam modul ini dan sebenarnya, saya sudah melakukannya di sini. Dalam pandangan saya di sini yang berada di tampilan sekitarnya,

146
00:11:41,200 --> 00:11:47,710
jadi kotak saya di sini, di sana saya juga menggunakan konten justifikasi dan menyelaraskan item untuk memusatkan nomor saya di kotak-kotak

147
00:11:47,710 --> 00:11:54,070
ini, sehingga 1, 2 dan 3 dipusatkan di sana secara horizontal dan vertikal dan itu berfungsi karena kami memiliki flexbox

148
00:11:54,070 --> 00:12:00,700
dinyalakan secara default dan kami tidak dapat mematikannya dengan cara dan oleh karena itu, saya hanya menggunakan dua properti ini di

149
00:12:00,700 --> 00:12:08,320
sini untuk menyelaraskan konten saya dari tampilan ini sepanjang sumbu utama dan silang dan di sini karena saya tidak menetapkan flex khusus arah untuk

150
00:12:08,320 --> 00:12:14,170
tampilan ini, sumbu utama adalah dari atas ke bawah karena arah fleks default adalah kolom dan sumbu silang

151
00:12:14,530 --> 00:12:16,420
dibiarkan dari kiri ke kanan.

152
00:12:16,420 --> 00:12:17,440
Itu hanya catatan.