พื้นฐาน Component: View, Text, และ Image

สวัสดีครับ! จากบทที่แล้ว เราได้สร้างโปรเจกต์ React Native ง่ายๆ ด้วย Expo CLI และได้เห็นข้อความ "Hello World!" ปรากฏบนหน้าจอแล้ว ในบทนี้ เราจะมาเรียนรู้เกี่ยวกับ Component พื้นฐานที่สำคัญที่สุด 3 ตัวใน React Native ได้แก่ View, Text, และ Image Component เหล่านี้เป็นเหมือนอิฐก้อนแรกๆ ที่เราจะนำมาสร้างโครงสร้างและ UI (User Interface) ของแอปพลิเคชันของเราครับ

Component คืออะไร?

ก่อนอื่น มาทำความเข้าใจกันก่อนว่า Component (คอมโพเนนต์) คืออะไรในโลกของ React Native Component คือส่วนประกอบย่อยๆ ที่นำมาประกอบกันเป็นหน้าจอ หรือส่วนต่างๆ ของแอปพลิเคชัน Component แต่ละตัวจะมีหน้าที่เฉพาะของตัวเอง เช่น แสดงข้อความ แสดงรูปภาพ จัดวาง Layout หรือรับข้อมูลจากผู้ใช้ (ที่เราจะเรียนกันในบทต่อๆ ไป)

ข้อดีของการใช้ Component คือ ช่วยให้โค้ดของเราเป็นระเบียบ อ่านง่าย และสามารถนำกลับมาใช้ใหม่ได้ (Reusable) ลองนึกภาพว่าถ้าเราต้องเขียนโค้ดทั้งหมดสำหรับทุกส่วนของแอปพลิเคชันเองทั้งหมด คงจะยุ่งยากและซับซ้อนมากเลยทีเดียว

View: พื้นฐานของการจัด Layout

View เป็น Component ที่สำคัญที่สุดตัวหนึ่งใน React Native เพราะเป็นเหมือน "กล่อง" ที่ใช้สำหรับจัดวาง Component อื่นๆ ให้เป็น Layout ตามที่เราต้องการ เปรียบเสมือน div ใน HTML ครับ

หน้าที่หลักของ View คือ:

การจัด Layout: กำหนดตำแหน่ง ขนาด และลักษณะการจัดเรียงของ Component ภายใน
การจัดการ Style: กำหนดสีพื้นหลัง ขอบ ขนาดตัวอักษร และอื่นๆ
การจัดการ Event: ตอบสนองต่อการกระทำของผู้ใช้ เช่น การแตะ (ที่เราจะเรียนในบทหลังๆ)

ตัวอย่างการใช้งาน View:

import React from 'react';
import { View, Text } from 'react-native';

const App = () => {
  return (
    <View style={{ flex: 1, backgroundColor: 'lightblue', justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24, fontWeight: 'bold' }}>Hello React Native!</Text>
    </View>
  );
};

export default App;

คำอธิบาย:

เรา import Component View และ Text จาก react-native
ภายใน Component App เรา return View ที่มี style กำหนดไว้
style เป็น Object ที่กำหนด CSS (Cascading Style Sheets) ให้กับ View
flex: 1 หมายถึงให้ View ขยายเต็มพื้นที่หน้าจอ (สำคัญมากสำหรับการจัด Layout)
backgroundColor: 'lightblue' กำหนดสีพื้นหลังเป็นสีฟ้าอ่อน
justifyContent: 'center' จัดเรียง Component ภายในตามแนวตั้งให้อยู่ตรงกลาง
alignItems: 'center' จัดเรียง Component ภายในตามแนวนอนให้อยู่ตรงกลาง
ภายใน View เราใส่ Component Text เพื่อแสดงข้อความ "Hello React Native!"

ลองคัดลอกโค้ดนี้ไปใส่ในไฟล์ App.js ของโปรเจกต์ที่เราสร้างไว้ในบทที่แล้ว แล้วรันแอปดู คุณจะเห็นข้อความ "Hello React Native!" แสดงอยู่ตรงกลางหน้าจอพื้นหลังสีฟ้าอ่อน

ข้อควรรู้:

flex เป็น property ที่สำคัญมากในการจัด Layout ใน React Native โดยใช้หลักการของ Flexbox (คล้ายกับ CSS Flexbox ใน Web Development)
React Native ใช้ Camel Case (เช่น backgroundColor) แทนที่จะเป็น Kebab Case (เช่น background-color) เหมือนใน CSS

Text: แสดงข้อความ

Text เป็น Component ที่ใช้สำหรับแสดงข้อความใน React Native การใช้งานก็ตรงไปตรงมาครับ

หน้าที่หลักของ Text คือ:

การแสดงข้อความ: แสดงข้อความที่เราต้องการ
การจัดการ Style: กำหนดขนาดตัวอักษร สีตัวอักษร รูปแบบตัวอักษร และอื่นๆ

ตัวอย่างการใช้งาน Text:

import React from 'react';
import { View, Text } from 'react-native';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 20, color: 'red' }}>This is a red text.</Text>
      <Text style={{ fontWeight: 'bold' }}>This is a bold text.</Text>
      <Text>This is a default text.</Text>
    </View>
  );
};

export default App;

คำอธิบาย:

เราใช้ Text 3 ตัว เพื่อแสดงข้อความ 3 แบบ
style={{ fontSize: 20, color: 'red' }} กำหนดขนาดตัวอักษรเป็น 20 และสีเป็นสีแดง
style={{ fontWeight: 'bold' }} กำหนดให้ตัวอักษรเป็นตัวหนา
<Text>This is a default text.</Text> แสดงข้อความด้วย Style default

ข้อควรรู้:

Text สามารถซ้อนกันได้ (Nested) เพื่อกำหนด Style ที่แตกต่างกันในแต่ละส่วนของข้อความ

Image: แสดงรูปภาพ

Image เป็น Component ที่ใช้สำหรับแสดงรูปภาพใน React Native

หน้าที่หลักของ Image คือ:

การแสดงรูปภาพ: แสดงรูปภาพจากแหล่งต่างๆ (Local หรือ Network)
การจัดการ Style: กำหนดขนาดรูปภาพ รูปแบบการแสดงผล และอื่นๆ

ตัวอย่างการใช้งาน Image:

import React from 'react';
import { View, Image } from 'react-native';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={{ width: 100, height: 100 }}
      />
    </View>
  );
};

export default App;

คำอธิบาย:

source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }} กำหนด URL ของรูปภาพที่จะแสดง
style={{ width: 100, height: 100 }} กำหนดขนาดของรูปภาพเป็น 100x100 pixels

การแสดงรูปภาพจาก Local:

หากต้องการแสดงรูปภาพที่อยู่ในโปรเจกต์ของเราเอง (เช่น ในโฟลเดอร์ assets) เราสามารถทำได้ดังนี้:

สร้างโฟลเดอร์ assets ใน root directory ของโปรเจกต์
นำรูปภาพที่ต้องการ (เช่น my_image.png) ไปใส่ในโฟลเดอร์ assets
แก้ไขโค้ด App.js ดังนี้:

import React from 'react';
import { View, Image } from 'react-native';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Image
        source={require('./assets/my_image.png')}
        style={{ width: 100, height: 100 }}
      />
    </View>
  );
};

export default App;

คำอธิบาย:

source={require('./assets/my_image.png')} ใช้ require เพื่อนำเข้ารูปภาพจากไฟล์

ข้อควรรู้:

การแสดงรูปภาพจาก Network อาจใช้เวลาในการโหลด ขึ้นอยู่กับขนาดของรูปภาพและความเร็วอินเทอร์เน็ต
ควร optimize รูปภาพให้มีขนาดเหมาะสม เพื่อลดเวลาในการโหลดและประหยัด bandwidth

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับ Component พื้นฐาน 3 ตัวใน React Native ได้แก่ View, Text, และ Image Component เหล่านี้เป็นพื้นฐานสำคัญในการสร้าง UI ของแอปพลิเคชันของเรา การเข้าใจการทำงานและวิธีการใช้งาน Component เหล่านี้เป็นอย่างดี จะช่วยให้เราสามารถสร้าง Layout และแสดงผลข้อมูลได้อย่างมีประสิทธิภาพ

ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับ Props (พร็อพส์) ซึ่งเป็นวิธีการส่งข้อมูลระหว่าง Components เพื่อให้ Components สามารถนำข้อมูลนั้นไปใช้ในการแสดงผลหรือประมวลผลได้ อย่าลืมติดตามนะครับ!