1
00:00:02,230 --> 00:00:08,300
Jadi kita mulai dengan input teks, saat ini kita tidak melakukan apa-apa dengan nilai-nilai yang dimasukkan pengguna tetapi sebelum

2
00:00:08,350 --> 00:00:14,020
kita melakukannya, mari kita pastikan bahwa sebenarnya tombol tidak di bawah input itu tetapi di sebelahnya di sebelah

3
00:00:14,020 --> 00:00:15,520
kanan dan untuk itu

4
00:00:15,520 --> 00:00:17,700
lagi, kita perlu bekerja pada tata letak.

5
00:00:17,710 --> 00:00:21,970
Itu sebabnya saya memiliki pandangan ekstra ini di sini di sekitar input teks di tombol.

6
00:00:21,970 --> 00:00:27,490
Kita tidak membutuhkan itu tetapi sekarang dengan tampilan bersarang itu, kita dapat mengontrol bagaimana dua item

7
00:00:27,490 --> 00:00:31,440
ini disejajarkan satu sama lain, dengan menambahkan lagi properti style

8
00:00:31,660 --> 00:00:38,980
di sini dan sekarang untuk tata letak, untuk penentuan posisi barang, Bereaksi Asli menggunakan flexbox yang juga mungkin Anda lakukan ketahui

9
00:00:38,980 --> 00:00:45,050
dari web, jika Anda tidak, terpasang Anda akan menemukan sumber daya yang membantu Anda memulai dengan CSS flexbox.

10
00:00:45,220 --> 00:00:49,840
Anda tidak perlu tahu flexbox masuk dan keluar tetapi itu membantu untuk mengetahui

11
00:00:49,840 --> 00:00:56,590
sedikit tentang hal itu, flexbox berfungsi sedemikian rupa sehingga memposisikan elemen di dalam tampilan di samping satu sama lain atau

12
00:00:56,800 --> 00:01:00,200
di atas satu sama lain, secara default di atas satu

13
00:01:00,230 --> 00:01:06,460
sama lain di Bereaksi Asli dan Anda dapat mengubahnya dengan mengatur arah fleksibel dari kolom yang merupakan default

14
00:01:06,880 --> 00:01:12,610
ke baris dan hanya dengan menambahkan ini, pada tampilan ini, kami menimpa default yang merupakan default yang

15
00:01:12,610 --> 00:01:18,430
mengapa kami tidak harus mematikannya kolom dan sekarang sudah , kita akan melihat bahwa tombol di input

16
00:01:18,430 --> 00:01:19,180
teks

17
00:01:19,330 --> 00:01:26,100
duduk bersebelahan, belum terlihat bagus tetapi mereka duduk bersebelahan. Sekarang untuk membuatnya terlihat lebih baik, kami juga

18
00:01:26,130 --> 00:01:27,960
dapat menambahkan lebih

19
00:01:28,140 --> 00:01:34,300
banyak, misalnya Anda dapat menentukan bagaimana hal-hal diselaraskan dan didistribusikan di baris atau kolom mereka.

20
00:01:34,650 --> 00:01:41,700
Misalnya dengan membenarkan konten, Anda dapat mengontrol bagaimana item didistribusikan di sepanjang sumbu utama dan dengan

21
00:01:41,700 --> 00:01:45,410
baris, sumbu utama dari kiri ke kanan,

22
00:01:45,480 --> 00:01:50,570
jika itu berupa kolom, sumbu utama akan dari atas ke bawah.

23
00:01:50,630 --> 00:01:57,980
Jadi sekarang kita dapat menentukan nilai dan di sini IDE saya bahkan memberi saya pelengkapan otomatis yang sangat

24
00:01:58,130 --> 00:02:05,210
nyaman, kita dapat menentukan nilai ruang antara misalnya. Artinya, semua ruang kosong yang tersisa ada di antara

25
00:02:05,210 --> 00:02:07,690
dua elemen, jadi mereka sekarang

26
00:02:07,760 --> 00:02:12,560
tidak duduk bersebelahan, tetapi ada ruang kosong di antara keduanya seperti yang

27
00:02:12,560 --> 00:02:13,590
Anda tahu.

28
00:02:14,590 --> 00:02:18,010
Sekarang kita juga dapat menyelaraskannya pada

29
00:02:18,060 --> 00:02:23,950
sumbu silang mereka, jadi sumbu utama untuk baris arah fleks kiri ke

30
00:02:23,950 --> 00:02:31,130
kanan, kemudian lintas silang adalah atas ke bawah. Untuk kolom arah lentur, sumbu utama akan dari atas ke bawah dan sumbu silang

31
00:02:31,130 --> 00:02:32,220
akan kiri ke

32
00:02:32,270 --> 00:02:38,750
kanan, sehingga sumbu silang adalah kebalikan dari sumbu utama sehingga bisa dikatakan. Ratakan posisi konten di sepanjang sumbu

33
00:02:38,750 --> 00:02:46,910
utama, dengan menyelaraskan item, Anda dapat mengontrol bagaimana elemen anak dari tampilan ini disejajarkan di sepanjang sumbu silang

34
00:02:46,910 --> 00:02:51,670
dan di sana Anda memiliki nilai yang berbeda, seperti misalnya pusat.

35
00:02:51,980 --> 00:02:58,250
Jadi dalam hal ini, karena kita memiliki baris arah lentur, ini harus memusatkan secara vertikal semua item yang berarti bahwa tombol

36
00:02:58,250 --> 00:03:05,230
sekarang terlihat lebih bagus dan hanya berpusat di tengah input ini. Nah dan sekarang kita juga bisa meningkatkan

37
00:03:05,230 --> 00:03:10,150
lebar input itu sedikit dengan pergi ke input teks dan di

38
00:03:10,150 --> 00:03:17,050
sana pada gaya, kita juga dapat menambahkan lebar katakanlah 200, untuk memberikan ini lebar 200 piksel

39
00:03:17,050 --> 00:03:24,170
yang berarti bahwa ini sekarang sedikit lebih besar. Sebagai alternatif, Anda juga bisa memilih nilai

40
00:03:24,560 --> 00:03:30,830
persentase seperti 80%, yang berarti bahwa ini membutuhkan 80% dari lebar yang tersedia yang

41
00:03:30,890 --> 00:03:38,180
disediakan oleh komponen induknya, jadi oleh tampilan yang mengelilinginya. Dan sekarang dengan itu, kita telah melihat dasar-dasar penting pertama,

42
00:03:38,450 --> 00:03:44,720
tentang meletakkan hal-hal di React Native dan menata hal-hal tetapi sekarang, kita melakukan semua itu dengan

43
00:03:44,720 --> 00:03:51,040
konsep yang disebut gaya inline, yang berarti kita sedang menyiapkan gaya langsung pada elemen dan itu

44
00:03:51,050 --> 00:03:52,250
tidak ideal.