Styling with StyleSheet

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

StyleSheet.create() က style object တွေကို validate/optimize လုပ်ပေးတဲ့ helper function ပါ — plain object ({ }) ကို တိုက်ရိုက်သုံးလည်း အလုပ်ဖြစ်ပေမယ့် StyleSheet.create ကို သုံးတာ performance ပိုကောင်းပြီး style error ကို development mode မှာ warning ပြပေးပါတယ်။ Property name တွေက CSS နဲ့ ဆင်တူပေမယ် camelCase ဖြစ်ပါတယ် (background-color → backgroundColor), unit မလိုအပ်ပါဘူး (px မထည့်ရ, number ချည်း ရေးပါတယ်)။

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

Style object များစွာကို component တစ်ခုမှာ ပေါင်းသုံးချင်ရင် array syntax သုံးလို့ရပါတယ် — style={[styles.base, styles.active]} ဆိုရင် base style အရင်သုံးပြီး active style ကို override လုပ်ပါတယ် (array ရဲ့ နောက်ဆုံး item က priority အမြင့်ဆုံး)။ Conditional styling (ဥပမာ button pressed state) ကို ဒီ array pattern နဲ့ လွယ်လွယ်ကူကူ implement လုပ်နိုင်ပါတယ်။

• StyleSheet.create() ကို plain object ထက် ဦးစားပေးသုံးခြင်း
• Property name camelCase (backgroundColor, fontSize)
• Style array [styles.a, styles.b] = ပေါင်းသုံး/override

Code နမူနာ

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

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#f0f0f0',
    borderRadius: 12,
    padding: 16,
    marginBottom: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
    color: '#1a1a2e',
  },
});

// Combining styles conditionally
<View style={[styles.card, isActive && styles.activeCard]}>
  <Text style={styles.title}>Card Title</Text>
</View>

Card component တစ်ခုကို StyleSheet.create နဲ့ style ချနိုင်ပြီး conditional style ကို array syntax နဲ့ ပေါင်းသုံးနိုင်မည်။