1
00:00:02,240 --> 00:00:04,430
Sekarang ini juga merupakan latihan yang

2
00:00:04,460 --> 00:00:09,440
bagus untuk Anda, Anda dapat menjeda video di sini dan mencoba memposisikan dua tombol ini di

3
00:00:09,440 --> 00:00:15,190
samping Anda sendiri, hanya dua tombol, bukan input dan dua tombol tetapi dua tombol ini harus dalam baris baru

4
00:00:15,200 --> 00:00:17,430
di bawah input tetapi kemudian duduk bersebelahan.

5
00:00:17,570 --> 00:00:23,610
Setelah jeda singkat yang dapat Anda gunakan untuk menjeda video, tentu saja kami akan melakukannya bersama.

6
00:00:23,650 --> 00:00:25,440
Jadi, apakah Anda berhasil?

7
00:00:25,450 --> 00:00:26,950
Mari kita coba bersama.

8
00:00:26,990 --> 00:00:34,670
Kuncinya di sini adalah menggunakan flexbox dan tampilan lain karena sekali lagi seperti yang saya sebutkan sebelumnya dan sangat penting untuk

9
00:00:34,670 --> 00:00:41,530
dipahami, komponen tampilan adalah komponen inti Anda untuk mengatur komponen lain atau untuk digunakan sebagai wadah yang juga dapat

10
00:00:41,530 --> 00:00:43,570
Anda gayakan tetapi di sini

11
00:00:43,600 --> 00:00:49,610
dalam hal ini kasus, untuk mengatur komponen lain. Jadi saya akan memindahkan dua tombol di dalam

12
00:00:49,720 --> 00:00:55,720
tampilan itu dan sekarang kita dapat menetapkan gaya untuk tampilan itu dan gaya itu tentu saja

13
00:00:55,750 --> 00:00:59,660
akan didefinisikan di sini di objek gaya kita dan saya

14
00:00:59,710 --> 00:01:06,400
akan memberi nama wadah tombol ini, ini terserah Anda, nama ini dan di sana, saya ingin mengatur

15
00:01:06,400 --> 00:01:13,360
arah fleksibel baris agar mereka duduk bersebelahan dan kemudian, saya akan mengatur pembenaran konten ruang antara untuk memiliki

16
00:01:13,360 --> 00:01:16,330
ruang kosong di antara dua tombol.

17
00:01:16,340 --> 00:01:25,190
Sekarang mari kita tambahkan gaya di sini ke tampilan itu, wadah gaya tombol dan simpan ini dan sekarang di sini adalah

18
00:01:25,190 --> 00:01:32,420
tombol tetapi untuk memiliki ruang kosong memiliki efek di sini, yang akan lebih jelas pada Android dengan cara,

19
00:01:32,420 --> 00:01:34,900
bahwa saat ini tidak memiliki

20
00:01:35,000 --> 00:01:37,880
efek, sehingga ruang antara tidak memiliki efek

21
00:01:37,910 --> 00:01:41,820
apa pun, izinkan saya cepat menunjukkan ini di Android.

22
00:01:42,030 --> 00:01:42,410
Soalnya,

23
00:01:42,420 --> 00:01:43,890
tidak ada ruang kosong.

24
00:01:43,920 --> 00:01:47,790
Alasan untuk itu adalah karena kami tidak memiliki lebar yang ditetapkan untuk wadah kancing kami

25
00:01:47,790 --> 00:01:48,200
dan

26
00:01:48,210 --> 00:01:50,100
oleh karena itu ketika Anda belajar, itu

27
00:01:50,370 --> 00:01:52,660
hanya membutuhkan lebar anak-anak dan itu hanyalah lebar dari

28
00:01:52,710 --> 00:01:53,820
dua tombol yang ditambahkan

29
00:01:53,940 --> 00:01:56,570
bersamaan, maka tidak ada ruang kosong untuk tambahkan di antaranya.

30
00:01:56,610 --> 00:02:01,410
Jadi kami memiliki beberapa ruang kosong di antaranya, kami hanya perlu menetapkan dengan ke wadah tombol

31
00:02:01,530 --> 00:02:05,800
dan sekarang lebar itu terserah Anda. Karena input memiliki 80%, kita

32
00:02:05,820 --> 00:02:14,340
bisa menggunakan 80% di sini juga atau mungkin dengan 60% untuk membuatnya sedikit lebih sempit daripada input di atas, sehingga tombol

33
00:02:14,400 --> 00:02:20,130
tidak duduk di tepi input tetapi itu dari tentu terserah Anda dan oleh karena

34
00:02:20,130 --> 00:02:21,090
itu

35
00:02:21,090 --> 00:02:27,060
sekarang dengan itu jika ini dimuat ulang dan kita telah melihat ini di Android dengan

36
00:02:27,060 --> 00:02:33,390
menggunakan cara yang mudah untuk menutupnya dan memulai kembali, sekarang kita akan melihat ruang kosong di

37
00:02:33,390 --> 00:02:34,930
antara dua tombol ini,

38
00:02:34,950 --> 00:02:36,730
ya itu terlihat bagus.

39
00:02:36,770 --> 00:02:38,700
Dan tentu saja Anda dapat bermain-main

40
00:02:38,730 --> 00:02:42,830
dengan itu, Anda juga bisa tentu saja menambahkan gaya ke tombol, Anda

41
00:02:42,840 --> 00:02:49,440
dapat menambahkan alat peraga gaya di sini juga dan menambahkan margin di kiri dan kanan setiap tombol, yang akan

42
00:02:49,440 --> 00:02:50,510
bekerja juga.

43
00:02:50,520 --> 00:02:56,250
Anda juga dapat bermain-main dengan nilai-nilai lain di sini, seperti ruang di sekitar untuk memiliki ruang kosong di sebelah kiri dan

44
00:02:56,250 --> 00:02:58,710
kanan tombol dan bukan hanya di antara mereka.

45
00:02:58,770 --> 00:03:03,000
Ini semua yang dapat Anda lakukan, saya akan pergi dengan ruang di sekitar sini dan memiliki pandangan akhir pada

46
00:03:03,000 --> 00:03:06,000
ini tetapi pada akhirnya itu tentu saja hanya sesuatu yang terserah Anda.

47
00:03:06,030 --> 00:03:11,400
Penting di sini tentu saja Anda memahami bagaimana Anda dapat mencapai sesuatu dengan bantuan tampilan yang Anda

48
00:03:11,550 --> 00:03:15,390
bungkus di sekitar tombol dan flexbox Anda dan kemudian dengan itu, saya

49
00:03:15,600 --> 00:03:18,900
akan mengatakan kita memiliki tampilan yang layak di sini.

50
00:03:19,110 --> 00:03:26,550
Sekarang satu hal terakhir, benar-benar hal terakhir yang saya masih ingin lakukan sekarang adalah mengubah ukuran tombol ini karena mereka tidak berukuran sama dan

51
00:03:26,550 --> 00:03:31,380
saya pikir itu akan terlihat sedikit lebih baik jika mereka memiliki ukuran yang sama.

52
00:03:31,410 --> 00:03:37,920
Sekarang pada sebuah tombol, Anda tidak dapat menambahkan prop gaya dan mengatur lebar, tidak peduli apakah Anda

53
00:03:37,950 --> 00:03:40,700
menggunakan gaya inline atau objek stylesheet,

54
00:03:40,710 --> 00:03:44,050
sebagai gantinya dan itu adalah sesuatu yang Anda harus

55
00:03:44,100 --> 00:03:51,860
tahu itulah sebabnya saya menutupinya di sini, Anda harus membungkus tombol Anda menjadi tampilan yang terpisah, seperti yang saya lakukan di

56
00:03:52,070 --> 00:03:59,270
sini dan kemudian memberikan tombol itu, misalnya di sini kita bisa menambahkan tombol gaya, merujuk ke properti tombol di

57
00:03:59,270 --> 00:04:05,990
sana, untuk setiap tampilan dan di sana pada ini properti tombol yang sekarang saya tambahkan, Anda bisa menambahkan

58
00:04:05,990 --> 00:04:08,780
lebar katakanlah 40% dan itu akan menjadi

59
00:04:08,780 --> 00:04:15,440
40% dari induk pandangan itu, jadi 40% dari tampilan wadah tombol yang dengan sendirinya mengambil 60% dari seluruh

60
00:04:16,220 --> 00:04:20,580
lebar yang tersedia dan kita bisa melakukan ini di tombol lain juga.

61
00:04:20,600 --> 00:04:28,010
Jadi itu hanya sesuatu yang harus Anda ketahui, jika Anda menambahkan tampilan sekeliling Anda di sini, di sekitar tombol Anda.

62
00:04:28,010 --> 00:04:34,490
Sekarang dengan itu jika kita kembali me-restart Android, kita harus memiliki tombol yang berukuran sama yang tentu saja sering

63
00:04:34,580 --> 00:04:36,710
adalah sesuatu yang Anda inginkan.

64
00:04:36,710 --> 00:04:42,980
Tentu saja Anda bisa juga menggunakan nilai piksel di sini daripada nilai persentase tetapi sekarang dengan itu, saya

65
00:04:43,220 --> 00:04:44,710
sangat senang, saya

66
00:04:44,780 --> 00:04:48,590
pikir itu sekarang benar-benar aplikasi yang terlihat bagus, berperilaku baik dan

67
00:04:48,710 --> 00:04:51,320
ya, ini awal yang baik dengan React Native.

68
00:04:51,320 --> 00:04:57,140
Sekarang jelas, ada begitu banyak lagi yang bisa kita pelajari dan kita akan selami, jauh lebih banyak yang bisa

69
00:04:57,140 --> 00:05:02,540
kita lakukan mengenai penataan karena seperti yang telah disebutkan, ini jelas bukan aplikasi terindah yang pernah Anda

70
00:05:03,110 --> 00:05:05,990
buat, tetapi kami membahas banyak dasar-dasar penting sini.