React Native (ตอนที่ 2/10) โครงสร้างการออกแบบ และ คอมโพเน้นพื้นฐาน


การเข้าใจโครงสร้างถือเป็นเรื่องสำคัญในการเขียนโปรแกรมทุกภาษา ตอนนี้จะค่อยๆ ให้เรารู้จักแต่ละ component รวมถึงกาใช้งานตัวช่วยอื่นๆ ที่จะทำให้แอพเราเก่งขึ้น

กฏ กติกา มารยาท: ชื่อ Tag หรือ Component ใน React Native จะเป็นแบบ case sensitive นั่นหมายความว่า <View> จะไม่เท่ากับ <view> และใน React Native ชื่อ component จะขึ้นต้นด้วยตัวพิมพ์ใหญ่เสมอ และถึงแม้จะเป็น component ที่เราสร้างเองก็ควรตั้งชื่อให้ขึ้นต้นด้วยตัวใหญ่ เพื่อจะได้เป็นไปในแนวทางเดียวกัน

องค์ประกอบ หน้าจอใน React Native

ส่วนหลักๆ ของการแสดงผลบนหน้าจอของ React Native คือการเขียน JSX Code ซึ่งประกอบไปด้วย Component ต่างๆ เช่น <View></View> , <Text></Text> และสามารถปรับแต่งการจัดรูปแบบโดยการใช้ style={{ }}

rn02-01_1

ภาพโครงสร้างพื้นฐานของไฟล์ App.js ไฟล์เริ่มต้นของ React Native

โครงสร้างการเขียน React Native จะเริ่มจากการสร้างสิ่งที่เรียกว่า คลาส (Class) บันทึกด้วยนามสกุลของไฟล์ .js โดยสืบทอดคุณสมบัติจาก Component  จากรูปด้านบนอธิบายส่วนประกอบอย่างย่อได้ดังนี้

  1. ส่วน import  บรรทัดที่ 1-2 จะเป็นส่วนแรกของไฟล์ เคล็ดลับคือ เมื่อใช้ Component ไหนให้เพิ่มในส่วนของการ import นี้
  2. ส่วน การประกาศ class บรรทัดที่ 4 กับส่วนปิด บรรทัดที่ 15  สามารถประกาศ export default เพื่อให้คลาสอื่นๆ สามารถเรียกใช้ class ของเราได้
  3. ส่วน function render( ){ … } บรรทัดที่ 5-14 ใช้ในการเขียน code JSX ผ่านการ return ในบรรทัดที่ 6
  4. ส่วนของ code JSX บรรทัดที่ 7-12 สำหรับจัดการแสดงผลโดยใช้ componnet ต่างๆ จากภาพที่เห็นคือใช้แค่ <View> กับ <Text>

 

กฏเหล็ก ของ JSX: ในการ return ภายใน render( ) จะต้องมี Root element แค่ตัวเดียว ทางแก้อย่างง่ายที่สุดคือ ใช้ <View> ครอบทุกอย่างเอาไว้ เพื่อจะได้ไม่ผิดกฏ

พระเอกในทุกตอน <View> และ <Text>

เราสมารถใช้ <View></View> ครอบทุกพื้นที่การแสดงผล และถือเป็น component หลักที่ใช้ในการจัดวาง layout (ถ้าใครเคยเขียน HTML อารมณ์ก็จะคล้ายๆการใช้ <div></div>) ส่วน <Text></Text> ใช้ในการแสดงข้อความ (** ใน React Native การแสดงข้อความต้องอยู่ใน <Text></Text> เสมอ)

** สิ่งที่ควรรู้ <View> </View> สามารถใช้ซ้อนกันหลายๆชั้นได้ ให้มองเหมือนการออกแบบ บอร์ดนิทรรศการ เราตัดกระดาษคนละสี วางซ้อนๆกันได้ อยากจะวางรูป วางป้ายข้อความก็วางซ้อนทับๆกันได้ **

rn02-02

ภาพ ตัวอย่างการใช้ <View> ซ้อนภายใน <View>

นอกจากการใช้ View กับ Text แล้ว เรายังสามารถใช้ style ในการจัดรูปแบบการแสดงผล

การตกแต่งด้วย Inline Style

การจัดรูปแบบการแสดงผลอย่างง่ายและเร็วๆ ใน React Native เรามักใช้ inline stylesheet ในรูปแบบ <View style={{รูปแบบที่ต้องการกำหนด }}> สังเกตว่าใช้ปีกกา 2 ชั้น  โดยการกำหนดสามารถเรียกใช้ property คล้ายกับ CSS ในการเขียน HTML ของเว็ป ต่างกันแค่ ลบ – ออก แล้วให้ตัวหลัง – ขึ้นต้นเป็นตัวใหญ่ เช่น ของ CSS ใช้ font-size: 20 ใน React Native Style จะใช้เป็น fontSize: 20 เป็นต้น ถ้ามีมากกว่า 1 ตัว ให้คั่นด้วยเครื่องหมาย ,  (คอมม่า) โดยมี property ที่ใช้บ่อยๆ ดังนี้

  • color  สีของตัวอักษร
  • backgroundColor สีของพื้นหลัง
  • margin คือระยะห่างระหว่างขอบ View  กับขอบภายนอก
  • padding คือระยะห่างระหว่างขอบ View กับขอบภายใน
  • height คือ ความสูง และ width คือความกว้าง

ส่วนของ margin  และ padding สามารถกำหนดตำแหน่งเฉพาะได้โดยระบบ Top, Bottom, Left, Right เช่น marginTop, marginLeft

rn02-03

 

การกำหนดค่าสีสามารถใช้ได้หลายแบบ

  • เป็นชื่อสี เช่น ‘red’, ‘blue’
  • เป็นค่า rgb  เช่น ‘#ff0000’  หรือ rgb(255,0,0)
  • เป็นค่า rgb กับค่า alpha โดยใช้ rgba(255,0,0,0.5) คือสีแดงโปร่งแสง 50%

 

กฏเหล็ก ของ JSX: ในการใช้งาน ถ้ามีของอยู่ข้างใน (ระหว่าง Tag) เช่น <Text>ข้อความ</Text> มี Tag เปิด <Text> ก็ต้องมี Tag ปิด </Text> ด้วยเสมอ ใช้ / ทับข้างหน้า

พระรองที่ขาดไม่ได้ <TouchableOpacity> และ <TouchableHightlight>

โดยปกติหากต้องการรับข้อมูลจากผู้ใช้เราจะใช้ TextInput หรือ Button ในการร้บอีเว้นที่เกิดขึ้น เช่นรับการกด จะใช้ onPress เป็นต้น แต่ถ้าเราต้องการให้ <View> หรือ <Text> สามารถรับ event การกด ได้ด้วย ทาง React Native มีตัวช่วยให้ใช้คือ TouchableOpacity ที่จะสีจางลงเวลากด กับ TouchableHighlight ที่จะสีเข้มขึ้นเวลากด โดยการทำงานจะสามารถรองรับ onPress() ได้เหมือนกับ Button เลย เราจึงนิยมใช้เจ้า 2 ตัวนี้ในการครอบสิ่งที่ต้องการให้สามารถรับ event ต่างๆ ได้ง่ายขึ้น

rn02-04

ภาพตัวอย่างการใช้งาน TouchableOpacity

ง่ายๆ อยากให้อะไรรับ event click หรือ tap ได้ก็ใช้ TouchableOpacity ครอบแล้วเขียน function รองรับ เป็นอันจบ **ในบทต่อๆ ไปจะมีพูดถึง inline function ในกรณีที่เราอยากเขียนโค้ดประมาณ 2-3 บรรทัด ลงใน JSX เลย

Component แนะนำ จำเป็นต้องรู้จัก

link แนะนำสำหรับมือใหม่ React Native ทุกคนที่ควรต้องเข้าไปเดินเล่น และลองโค้ดทุกอันในนั้นก่อน เพื่อสร้างความคุ้นเคยคือ
 https://facebook.github.io/react-native/docs/getting-started ไล่ตรงแถบด้านข้างทุกตัว ค่อยๆลอง ค่อยๆเล่น

rn02-05

หน้าจอ document ของ React Native ควรเข้าไปดูบ่อยๆ

การบ้าน

ไม่มีเวทมนต์วิเศษ อยากเก่งต้องฝึกฝน มีวินัยกับตัวเองให้มาก จากเนื้อหาที่ผ่านมาเลยอยากลองท้าทายผู้อ่านให้ลองทำโจทย์เล็กๆ ง่ายๆ ทั้งจากการอ่านบทความนี้ ค้นหาในบทความอื่น และดูจากตัวอย่างในเว็ป React Native ทำหน้า Home ของโปรแกรมอย่างง่าย โดยมีคุณสมบัติดังนี้

  1. มีส่วนของ Header ความสูงประมาณ 40 ให้มีสีพื้นหลังตามสะดวกแต่ขอให้เป็นสีเข้ม, fontSize ประมาณ 18 เป็นตัวหนา ตัวหนังสือสีขาวตัดกับพื้นหลัง
  2. มี Text Input สำหรับเป็นช่องค้นหาโดยมีปุ่มเขียนคำว่า “ค้นหา” อยู่ข้างๆ (ใช้เทคนิค flexDirection เข้ามาช่วย ดูตามตัวอย่าง)
  3. ถัดจากปุ่มค้นหา ให้แสดงรายการข้อมูล ด้วย FlatList โดยรายการข้างใน มีรายละเอียดของ list คือ รูป อยู่ด้านซ้าย ขนาดความกว้าง 1/3 ของหน้าจอ ส่วนด้านขวาเป็นชื่อรายการกว้าง 2/3 ของหน้าจอ (ใช้เทคนิค flexDirection:’row’ เข้ามาช่วยในการจัดเช่นกัน)

rn02-06

รูปตัวอย่างการจัดหน้าจอ โดยใช้  <View>, <Text>, <TextInput>, <Buton>, <Image>, และ <ScrollView>

หมายเหตุ: ส่วนที่เป็น […] คือที่ละไว้ให้เติม inline style และ โค้ดที่เหลือจากตัวอย่างก่อนๆหน้านี้

บทความนี้ เอาประมาณนี้ก่อน รอคนส่งการบ้านอยู่นะครับ ถึงจะขึ้นบทถัดไป ^^ อย่างลืมฝึกฝนเยอะๆ ทำบ่อยๆ จัดบ่อยๆ … ในบทหน้า เราจะมาดูวิธีการทำ Code ให้ Clean และการปรับในส่วนของ Style ให้ใช้งานได้ง่ายขึ้น พร้อมการจัด layout หน้าจอเพื่อให้รองรับหน้าจอหลายๆขนาดกัน

บทความเสริม

  1. การออกแบบ UX/UI ด้วย Adobe XD
  2. พื้นฐานภาษา JavaScript ES6
  3. การใช้งาน Firebase
  4. การติดตั้ง โฆษณาของ AdMob ไว้ทำเงิน

ติดตามทุกตอนของ Series นี้ (กำหนดการคือ อย่างน้อย สัปดาห์ละ 1 ตอน)

  1. การติดตั้งเครื่องมือที่จำเป็น
  2. โครงสร้างการออกแบบ และ คอมโพเน้นพื้นฐาน
  3. การใช้ Style , Font และ Icon
  4. การสร้าง Component แล้วนำกลับมาใช้ใหม่
  5. การใช้งาน Navigation เชื่อมหลายหน้าจอ
  6. การดึงข้อมูลจาก JSON มาใช้งาน และการใช้ Local Storage
  7. การดึงข้อมูลจาก Firebase และเนื้อหาจากเว็ป
  8. การใช้งาน กล้อง การอ่านและแสดง QR-Code
  9. การใช้งาน Link, Share และการโทร
  10. การ build APK เพื่อนำขึ้น Store

ติดตามข้อมูลผ่าน FanPage เข้าไปกด Like ที่: https://www.facebook.com/AjBeeMePage

กับฝากติดตาม FanPage สาขาวิศวกรรมซอฟต์แวร์ @ MFU ที่ https://www.facebook.com/sitsemfu/