StyleSheet — คืออะไร, การสร้างสไตล์ใน React Native

StyleSheet คืออะไร?

StyleSheet — API React Native ในตัวสำหรับกำหนดสไตล์ของคอมโพเนนต์ ต่างจาก CSS ในการพัฒนาเว็บ RN ใช้อ็อบเจกต์ JavaScript เพื่ออธิบายสไตล์ StyleSheet.create — เมธอดหลัก — รับอ็อบเจกต์สไตล์และส่งคืนอ็อบเจกต์พร้อมตัวระบุตัวเลข

StyleSheet เป็นส่วนหนึ่งของแกนหลัก React Native และไม่ต้องติดตั้งแพ็กเกจเพิ่มเติม ตามข้อมูลของ Meta (2026) 95% ของโปรเจกต์ React Native ใช้ StyleSheet.create สำหรับสไตล์คงที่ ทางเลือก: styled-components, Emotion, NativeWind (Tailwind สำหรับ RN) — แต่ StyleSheet ในตัวยังคงเป็นมาตรฐานสำหรับแกนหลัก

ประวัติและวิวัฒนาการ

ในเวอร์ชันแรกของ React Native (2015) สไตล์ถูกกำหนดเป็นอ็อบเจกต์อินไลน์เท่านั้น StyleSheet.create ปรากฏใน RN 0.4 ในรูปแบบการเพิ่มประสิทธิภาพ แนวคิดนี้ยืมมาจาก CSS: แยกสไตล์ออกจากตรรกะเพื่อความอ่านง่ายและประสิทธิภาพ ตลอดหลายปีที่ผ่านมา API ขยายตัว: เพิ่ม absoluteFill, hairlineWidth, flatten

StyleSheet.create เทียบกับสไตล์อินไลน์

ความแตกต่างระหว่าง StyleSheet.create และสไตล์อินไลน์มีความสำคัญต่อประสิทธิภาพ สไตล์อินไลน์เป็นอ็อบเจกต์ JavaScript ทั่วไปที่สร้างขึ้นทุกครั้งที่เรนเดอร์คอมโพเนนต์ StyleSheet.create — อ็อบเจกต์ที่สร้างขึ้นครั้งเดียวเมื่อโหลดโมดูลและแปลงเป็น ID ตัวเลข

เมื่อส่งสไตล์อินไลน์ React Native จะส่งอ็อบเจกต์ทั้งหมดผ่านบริดจ์ JavaScript-Native ทุกครั้ง สำหรับคอมโพเนนต์ที่มีสไตล์ซับซ้อน นั่นหมายถึงการถ่ายโอนคุณสมบัติหลายสิบรายการในทุกการเรนเดอร์ StyleSheet.create ส่งเฉพาะตัวระบุตัวเลข ลดภาระของบริดจ์

// StyleSheet.create — แนวทางที่ปรับให้เหมาะสม
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// สไตล์อินไลน์ — สร้างอ็อบเจกต์ใหม่ทุกครั้งที่เรนเดอร์
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

<Text style={styles.title}>Title</Text>

เมื่อใดควรใช้อินไลน์: สำหรับสไตล์ไดนามิกที่ขึ้นอยู่กับสถานะ (กด, เลือก, ทำงาน) สำหรับสไตล์คงที่ ให้ใช้ StyleSheet.create เสมอ กฎ: คงที่ → create, ไดนามิก → ฟังก์ชันอินไลน์

เลย์เอาต์ Flexbox ด้วย StyleSheet

Flexbox — กลไกเลย์เอาต์เดียวใน React Native (CSS Grid ไม่รองรับ, float ไม่มี) StyleSheet.create ใช้สำหรับอธิบายคอนเทนเนอร์ flex และองค์ประกอบลูก คุณสมบัติหลัก: flex (สัมประสิทธิ์การเติม), flexDirection (row | column), justifyContent, alignItems

โดยค่าเริ่มต้น flexDirection ใน React Native คือ column (ใน CSS — row) นี่คือสิ่งแรกที่ต้องจำเมื่อย้ายจากการพัฒนาเว็บ คอมโพเนนต์ View ทั้งหมดเป็นคอนเทนเนอร์ flex โดยค่าเริ่มต้น การจัดองค์ประกอบให้อยู่กึ่งกลาง ให้ใช้ alignItems: 'center' + justifyContent: 'center'

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

สำคัญ: ใน React Native ขนาดทั้งหมดถูกระบุโดยไม่มีหน่วย (เพียงตัวเลข) เปอร์เซ็นต์ทำงานได้ แต่สำหรับความกว้างและความสูงที่สัมพันธ์กับพ่อแม่เท่านั้น margin และ padding รับตัวเลข สำหรับความตอบสนอง ให้ใช้ flex แทนเปอร์เซ็นต์ — เชื่อถือได้มากกว่าบนหน้าจอต่าง ๆ

API StyleSheet: create, flatten, hairlineWidth, absoluteFill

StyleSheet API รวมถึงหลายเมธอดนอกเหนือจาก create StyleSheet.flatten รวมอาร์เรย์ของสไตล์เป็นอ็อบเจกต์เดียว — มีประโยชน์สำหรับการประกอบและการส่งสไตล์ไปยังคอมโพเนนต์ของบุคคลที่สาม StyleSheet.hairlineWidth ส่งคืนความกว้างเส้นต่ำสุดที่มองเห็นได้บนอุปกรณ์

StyleSheet.absoluteFill — สไตล์ที่กำหนดไว้ล่วงหน้า { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 } ใช้สำหรับเลเยอร์โอเวอร์เลย์ หน้าต่างโมดอล และการวางตำแหน่งแบบสัมบูรณ์เต็มหน้าจอ StyleSheet.absoluteFillObject — เดียวกันแต่เป็นอ็อบเจกต์สำหรับการขยาย

// flatten — รวมสไตล์
const base = StyleSheet.create({
  button: { padding: 12, borderRadius: 8 },
  primary: { backgroundColor: 'blue' },
});

const combined = StyleSheet.flatten([base.button, base.primary]);
// { padding: 12, borderRadius: 8, backgroundColor: 'blue' }

// hairlineWidth — เส้นต่ำสุด
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth มีประโยชน์สำหรับตัวคั่นและเส้นขอบ — มันดูเหมือน 1 พิกเซลจริงเสมอโดยไม่ขึ้นกับความหนาแน่นของหน้าจอ บนจอ Retina นี่คือ 0.5 จุดเชิงตรรกะ บนจอปกติ — 1 จุด อย่าใช้ hairlineWidth สำหรับองค์ประกอบที่ต้องมีขนาดเฉพาะเจาะจง

เลย์เอาต์แบบตอบสนองด้วย Dimensions API

Dimensions API ใช้ร่วมกับ StyleSheet สำหรับเลย์เอาต์แบบตอบสนองบนขนาดหน้าจอต่าง ๆ Dimensions.get('window') ส่งคืนความกว้างและความสูงของหน้าต่าง สำหรับการอัปเดตแบบตอบสนองเมื่อหมุนหน้าจอ ให้ใช้ hook useWindowDimensions จาก React Native

แม้ว่า StyleSheet.create จะไม่รองรับ media query เช่น CSS คุณสามารถคำนวณค่าตาม Dimensions ภายใน create หรือใช้สไตล์ไดนามิกผ่านฟังก์ชัน สำหรับเบรกพอยต์ ให้สร้างสไตล์แยกต่างหากสำหรับช่วงความกว้างต่าง ๆ

import { useWindowDimensions } from 'react-native';

const ResponsiveCard = () => {
  const { width } = useWindowDimensions();
  const isLarge = width > 768;

  return (
    <View style={[styles.card, isLarge && styles.cardLarge]}>
      <Text>Responsive card</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '100%',
    padding: 16,
  },
  cardLarge: {
    width: '50%',
    alignSelf: 'center',
  },
});

useWindowDimensions อัปเดตอัตโนมัติเมื่อหมุนหน้าจอและเปลี่ยนขนาดหน้าต่างบนแท็บเล็ตที่มี Split View สำหรับ SSR (React Native Web) ตรวจสอบให้แน่ใจว่า Dimensions.get ถูกเรียกหลังจากคอมโพเนนต์ถูก mount เพื่อหลีกเลี่ยงความแตกต่างระหว่างเซิร์ฟเวอร์และไคลเอนต์

การจัดระเบียบสไตล์ในโปรเจกต์

การจัดระเบียบ StyleSheet ในโปรเจกต์ส่งผลต่อการบำรุงรักษาและการนำโค้ดกลับมาใช้ใหม่ สามแนวทาง: สไตล์ภายในคอมโพเนนต์ (styles.js ข้างคอมโพเนนต์), สไตล์ทั่วโลก (theme.js พร้อมค่าคงที่สี, ระยะห่าง, การพิมพ์) และสไตล์แบบโมดูลาร์ผ่านการประกอบ

โครงสร้างที่แนะนำ: theme.js พร้อมค่าคงที่สี ขนาด และการพิมพ์; Component.styles.js ข้างคอมโพเนนต์แต่ละตัวสำหรับสไตล์เฉพาะ; StyleSheet.flatten สำหรับรวมสไตล์พื้นฐานและสไตล์เฉพาะ สำหรับโปรเจกต์ขนาดใหญ่ ให้ใช้ระบบการออกแบบพร้อมการสร้างธีม

// theme.js — ค่าคงที่ทั่วโลก
export const colors = {
  primary: '#6200EE',
  background: '#FFFFFF',
  text: '#1C1B1F',
  surface: '#F5F5F5',
};

export const spacing = {
  xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
};

export const typography = {
  h1: { fontSize: 24, fontWeight: 'bold', lineHeight: 32 },
  body: { fontSize: 16, lineHeight: 24 },
};

// Button.styles.js
import { colors, spacing, typography } from './theme';

export default StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.lg,
    borderRadius: 8,
  },
  text: {
    ...typography.body,
    color: '#FFFFFF',
    textAlign: 'center',
  },
});

ข้อดีของการจัดระเบียบแบบโมดูลาร์: แหล่งความจริงเดียวสำหรับสีและระยะห่าง, การปรับโครงสร้างที่ง่ายขึ้น (เปลี่ยน primary — ปุ่มทั้งหมดอัปเดต), การนำสไตล์กลับมาใช้ใหม่ผ่าน flatten, ความอ่านง่ายและคาดการณ์ได้ของโค้ด สำหรับโปรเจกต์ TypeScript ให้เพิ่มชนิดสำหรับธีมผ่าน declare module