web analytics

บันทึกการเรียน React Native ของผม ตอนที่ 1 ทำ Toolbar

cover_ep1

สวัสดีครับ มาเรียน react native กัน โดยผมกำลังหัดจากศูนย์เลย ไม่มีพื้นฐาน React ใดๆ โดยเรียนจากเว็บ forminit.com
ซึ่งสอนดีมากๆ โดยผมก็จะค่อยๆทำตาม จะพยายามอธิบายในสิ่งที่ผมพยายามเข้าใจด้วยครับ แล้วถ้าผมเจอปัญหาอะไรก็จะเขียนไว้ในบล็อกนี้ด้วย และในบล็อกนี้ผมเรียนจาก http://www.forminit.com/react-native-04/

 

โครงสร้างโปรเจค

ผมยังไม่เชี่ยวชาญเข้าใจว่าโครงสร้างโปรเจคเป็นอย่างไร เอาตามที่ผมเข้าใจตอนนี้คือ โฟลเดร์ ios , android จะเก็บไฟล์เฉพาะของ platform และ node_module ก็เก็บโค้ด library ของ react โดยตอนนี้เราจะเขียนแค่ไฟล์ index.js เท่านั้น

ในโปรเจคไฟล์ที่สำคัญคือ index.js เหมือนเป็นไฟล์ที่จะเรียกทำงานเมื่อแอปเริ่ม โดยในบล็อกที่ผมเรียนนั้นเขาบอกว่าจะมี index.ios.js กับ index.android.js ซึ่งเข้าใจว่าเอาไว้แยกตาม platform แต่ของผมมันไม่มีแหะ มีแค่ index.js ผมก็เลยไปหาข้อมูลก็พบว่าเป็นฟีเจอร์ใหม่ของ react-native คือมันรวมกันเป็นไฟล์ index.js เลยรันทีเดียวได้ทั้งคู่ แต่หากต้องการแยกก็สามารถสร้างไฟล์ index.ios.js กับ index.android.js  เหมือนเดิมได้

แล้วไฟล์ App.js อันนี้ทาง react สร้างมาให้เป็นเหมือน โค้ดส่วนที่ initial ค่าต่างๆ ซึ่งผมไม่ใช้เพระาอยากลองเขียนเอง

screen-shot-2018-03-30-at-2-07-13-pm

 

เริ่มจากสังเกตไฟล์ index.js (ซึ่งผมแก้ไปเรื่อย) โดยผมจะพยายามอธิบายตามความเข้าใจ

import ก็เหมือน import package ทั่วไป
import React , React-native ก็เหมือนเอา module ต่างๆที่เขาเตรียมไว้เข้ามา
ทีนี้ตามที่ผู้สอน เขาให้ลองสร้างไฟล์ header.js แล้ว import เข้ามา
โดยใน import.js ก็จะเขียนส่วน toolbar ไว้ ดังน้้นเวลาเราจะเอา toolbar ไปแปะที่ไหนก็จะสะดวก

ต่อมาก็ทำการสร้าง component ผมเข้าใจว่าเป็นเหมือน Custom View ใน Android
แต่ว่ามันจะไม่ได้เขียน view แยกเป็นไฟล์ xml แบบใน Android แต่เขียนสดในไฟล์ เช่น header.js เลย

จากนั้นก็ registerComponent ก็คือ เอา component ที่เราสร้างไว้ส่งไปแสดงในแอป
จากจุดนี้ผมยังไม่คุ้นกับ syntax ที่เขียนประมาณว่า () =>

 

ไฟล์ src/component/header.js

เริ่มจากสร้าง headerStyle ที่ภายในมี 2 obj คือ viewStyle , textStyle อันนี้เราตั้งชื่อเอง ชื่ออะไรก็ได้นะ
แต่ว่าข้างใน viewStyle , textStyle จะเป็นค่า css เช่น backgroundColor อันนี้เป็นของ css ต้องจำ
ซึ่งผมก็พอเคยเขียน css มาก็เลยพอจะรู้บ้าง
ในนี้เราก็กำหนด style ต่างๆได้ตามใจ

justifyContent คือ กำหนดตำแหน่งในแนวตั้ง
alignItems คือ กำหนดตำแหน่งในแนวนอน
shadowOpacity กำหนดความเข้มของเงา

ส่วนบรรทัดสุดท้าย export .. ก็คือ ก็เปิดให้ component อื่นสามารถเรียกไปใช้ได้

โดยผมก็เขียนตามที่ผู้สอนเขาเขียนไว้  แล้วลองรันจะได้ผลดังนี้

screen-shot-2018-03-30-at-2-44-09-pm

 

ต่อมา ผมก็ลองแยก ตัวแปร style ออกมาไม่ไปเขียนรวมกัน การเขียนแยกดูจะทำให้ผมชินมากกว่า
และต้องการดูว่าจะรันได้ไหม ผลที่ได้คือก็ได้ปกติเหมือนข้างบน

 

ทีนี้ผมมาลอง ลบ import View ออก เพราะผมอยากรู้ว่า เวลามัน Error มันขะเป็นยังไง ผลก็คือเป็นหน้าจอแดงๆแบบนี้
บอกบรรทัดต่างๆไว้ด้วยว่า error ตรงไหน

screen-shot-2018-03-30-at-3-02-08-pm

 

สรุป

ได้เรียนรู้เกี่ยวกับการใช้ Style ต่างในที่นี้ก็คือการลองทำ Toolbar แล้วก็การแยก component ออกมา ตอนนี้ผมพอจะเข้าใจหลักบ้างแล้ว

 

ขอขอบคุณ

http://www.forminit.com/react-native-04/