React Native คือ ตอนที่ 5 : สไตล์ (Styling)

1. ทำไมสไตล์จึงเป็นเรื่องสำคัญ
2. พื้นฐานของสไตล์ใน React Native
3. การใช้ StyleSheet API
4. Flexbox และเลย์เอาต์ (Layout) ใน React Native
5. การจัดการขนาดหน้าจอที่แตกต่างกัน

การทำแอพ React Native และทำแอพมือถือที่ไม่เพียงแต่ใช้งานได้ แต่ยังสวยงามเป็นเป้าหมายหลักสำหรับนักพัฒนาทุกคน หากคุณคุ้นเคยกับการพัฒนาเว็บ คุณอาจคุ้นเคยกับการออกแบบเว็บแอปพลิเคชันของคุณโดยใช้ CSS อย่างไรก็ตาม เมื่อพูดถึงการทำแอพ React Native และทำแอพมือถือข้ามแพลตฟอร์มด้วย React Native วิธีการจัดรูปแบบอาจแตกต่างกันเล็กน้อย ในคำแนะนำนี้ เราจะดำดิ่งสู่โลกอันน่าตื่นเต้นของสไตล์ React Native ซึ่งช่วยคุณทำแอพ React Native และทำแอพมือถือที่น่าทึ่งซึ่งจะทำให้ผู้ใช้ของคุณพึงพอใจ

1. ทำไมสไตล์จึงเป็นเรื่องสำคัญ

ก่อนอื่นเรามาพูดถึงสาเหตุที่สไตล์เป็นสิ่งสำคัญ รูปลักษณ์ของแอปของคุณมีบทบาทสำคัญในประสบการณ์ของผู้ใช้ การออกแบบที่ดีสามารถเพิ่มความสามารถในการใช้งานและทำให้แอปของคุณใช้งานง่ายและน่าดึงดูดยิ่งขึ้น มันเกี่ยวกับการทำให้แอปของคุณไม่เพียงแค่ใช้งานได้ แต่ยังสนุกอีกด้วย

ใน React Native เราบรรลุสิ่งนี้ได้โดยใช้ชุดย่อยของคุณสมบัติ CSS ควบคู่ไปกับพลังของ JavaScript React Native นำเสนอแอตทริบิวต์สไตล์และ StyleSheet API สำหรับนักพัฒนาในการกำหนดสไตล์ให้กับส่วนประกอบต่างๆ เพื่อให้แน่ใจว่าองค์ประกอบเหล่านี้มีความสวยงามและมอบประสบการณ์การใช้งานที่ราบรื่น

2. พื้นฐานของสไตล์ใน React Native

เมื่อทำแอพ React Native และทำแอพมือถือ คุณต้องเข้าใจว่าไม่มีไฟล์ CSS แบบดั้งเดิม สไตล์ถูกกำหนดไว้ในวัตถุ JavaScript แทน React Native ใช้สไตล์ในบรรทัด และมีแอตทริบิวต์เฉพาะ style สำหรับส่วนประกอบ React Native ทั้งหมด

นี่คือตัวอย่างง่ายๆ:

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

const HelloWorldApp = () => {
  return (
    <View style={{ padding: 50 }}>
      <Text style={{ color: 'blue', fontSize: 30 }}>
        Hello, world!
      </Text>
    </View>
  );
}
export default HelloWorldApp;

ในตัวอย่างโค้ดข้างต้น เราได้ใช้สไตล์โดยตรงโดยใช้ style ส่วนประกอบของส่วนประกอบ คอมโพเนนต์Viewมีช่องว่างภายใน 50 และ Text คอมโพเนนต์มีสีข้อความเป็นสีน้ำเงินและขนาดฟอนต์ 30

แม้ว่าการกำหนดสไตล์แบบอินไลน์จะเรียบง่ายและเข้าใจได้ง่าย แต่การใช้วิธีนี้อย่างกว้างขวางอาจทำให้โค้ดยุ่งเหยิงได้ นั่นคือจุดที่ StyleSheet API มีประโยชน์

3. การใช้ StyleSheet API

React Native เสนอStyleSheetAPI ที่ให้คุณกำหนดสไตล์แยกกันและใช้งานได้ทุกที่ที่จำเป็น ทำให้โค้ดของคุณสะอาดและมีประสิทธิภาพ สไตล์ถูกกำหนดไว้ในวัตถุ JavaScript และสามารถอ้างถึงได้ด้วยชื่อ นี่คือวิธีที่เราสามารถ refactor ตัวอย่างก่อนหน้าโดยใช้ StyleSheet:

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

const HelloWorldApp = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        Hello, world!
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 50
  },
  text: {
    color: 'blue',
    fontSize: 30
  }
});

export default HelloWorldApp;

ในตัวอย่างข้างต้น เราได้กำหนด styles วัตถุโดยใช้ StyleSheet.create เมธอด และใช้สไตล์เหล่านี้ในส่วนประกอบของเรา เมธอด StyleSheet.create ได้รับออบเจกต์ที่กำหนดลักษณะต่างๆ เป็นคุณสมบัติ คุณสมบัติเหล่านี้สามารถอ้างอิงได้ใน style ส่วนประกอบของ React Native

4. Flexbox และเลย์เอาต์ (Layout) ใน React Native

ในการพัฒนาเว็บไซต์ คุณอาจเคยชินกับการใช้เทคนิคต่างๆ สำหรับเลย์เอาต์ รวมถึงโฟลต การวางตำแหน่ง คุณสมบัติการแสดงผล เส้นตาราง และ Flexbox เมื่อทำแอพ React Native และทำแอพมือถือข้ามแพลตฟอร์มด้วย React Native Flexbox เป็นวิธีหลักที่ใช้สำหรับการวางองค์ประกอบ

Flexbox ทำให้ง่ายต่อการออกแบบโครงสร้างเลย์เอาต์ที่ตอบสนองอย่างยืดหยุ่นโดยไม่ต้องใช้โฟลตหรือการวางตำแหน่ง ใน React Native Viewส่วนประกอบจะเป็นคอนเทนเนอร์แบบยืดหยุ่นตามค่าเริ่มต้น ลองพิจารณาตัวอย่างที่เราต้องการแสดงสองมุมมองเคียงข้างกัน:

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

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box} />
      <View style={styles.box} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row'
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue'
  }
});

export default App;

ในตัวอย่างข้างต้น เรามีคอนเทนเนอร์ View ที่ใช้ flexDirection: 'row' จัดเรียงลูกในแนวนอน

5. การจัดการขนาดหน้าจอที่แตกต่างกัน

ประโยชน์ที่สำคัญของการใช้ React Native ในการทำแอพ React Native และทำแอพมือถือคือความสามารถโดยธรรมชาติในการจัดการกับขนาดหน้าจอและการวางแนวที่แตกต่างกัน ต้องขอบคุณ Flexbox และคุณสมบัติที่มีประโยชน์บางอย่าง เช่น percentages และ auto เราสามารถสร้างส่วนประกอบที่ปรับให้เข้ากับขนาดหน้าจอต่างๆ ได้อย่างสวยงาม

เปอร์เซ็นต์สามารถใช้สำหรับการตั้งค่าความกว้าง ความสูง และระยะขอบ ในขณะที่autoสามารถใช้เพื่อปรับขนาดโดยอัตโนมัติตามเนื้อหา

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

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: '10%', // Padding is 10% of the screen size
  },
  box: {
    width: '50%', // The box will take up 50% of its container's width
    height: '25%', // The box will take up 25% of its container's height
    backgroundColor: 'blue'
  }
});

export default App;

---

สไตล์ใน React Native แม้จะแตกต่างจาก CSS แบบดั้งเดิม แต่ก็มอบวิธีอันทรงพลังในการทำแอพ React Native และทำแอพมือถือข้ามแพลตฟอร์มที่สวยงาม ด้วยการทำความเข้าใจและใช้ประโยชน์ style จากแอตทริบิวต์ StyleSheetAPI และระบบเลย์เอาต์ Flexbox คุณจะสามารถทำแอพ React Native และทำแอพมือถือที่น่าดึงดูดซึ่งใช้งานได้กับขนาดหน้าจอและการวางแนวที่แตกต่างกัน

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

---

React Native คืออะไร

React Native คือ ตอนที่ 4 : React Native CLI กับ Expo

React Native คือ ตอนที่ 6 : การนำทาง (Navigation)