StyleSheet — ano ito, paggawa ng mga estilo sa React Native

Ano ang StyleSheet?

StyleSheet — built-in na API ng React Native para sa pagtukoy ng mga estilo ng component. Hindi tulad ng CSS sa pag-develop ng web, gumagamit ang RN ng mga JavaScript object para ilarawan ang mga estilo. Ang StyleSheet.create — ang pangunahing pamamaraan na tumatanggap ng object na may mga estilo at nagbabalik ng object na may numerical identifier.

Ang StyleSheet ay bahagi ng core ng React Native at hindi nangangailangan ng pag-install ng mga karagdagang package. Ayon sa data ng Meta (2026), 95% ng mga proyekto sa React Native ay gumagamit ng StyleSheet.create para sa static na mga estilo. Mga alternatibo: styled-components, Emotion, NativeWind (Tailwind para sa RN) — ngunit ang built-in na StyleSheet ay nananatiling pamantayan para sa core.

Kasaysayan at ebolusyon

Sa mga unang bersyon ng React Native (2015), ang mga estilo ay eksklusibong tinukoy sa pamamagitan ng inline na mga object. Lumitaw ang StyleSheet.create sa RN 0.4 bilang isang pag-optimize. Ang konsepto ay kinuha mula sa CSS: ihiwalay ang mga estilo mula sa lohika para sa pagiging madaling mabasa at performance. Sa paglipas ng mga taon, lumawak ang API: idinagdag ang absoluteFill, hairlineWidth, flatten.

StyleSheet.create vs inline na mga estilo

Ang pagkakaiba sa pagitan ng StyleSheet.create at inline na mga estilo ay kritikal para sa performance. Inline na estilo — isang ordinaryong JavaScript object, na nilikha sa bawat render ng component. StyleSheet.create — isang object na nilikha nang isang beses kapag nag-load ang module at ginawang numerical ID.

Kapag nagpapadala ng inline na estilo, ang React Native sa bawat pagkakataon ay nagpapadala ng buong object sa pamamagitan ng JavaScript-Native bridge. Para sa isang component na may kumplikadong mga estilo, ito ay sampu-sampung property na ipinapadala sa bawat render. Ang StyleSheet.create ay nagpapadala lamang ng numerical identifier, binabawasan ang karga ng bridge.

// StyleSheet.create — optimized approach
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// Inline style — lumilikha ng bagong object sa bawat render
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

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

Kailan gagamit ng inline: para sa dynamic na mga estilo na nakadepende sa estado (pressed, selected, active). Para sa static na mga estilo, palaging gamitin ang StyleSheet.create. Patakaran: static → create, dynamic → inline function.

Flexbox layout sa pamamagitan ng StyleSheet

Flexbox — ang tanging mekanismo ng layout sa React Native (hindi sinusuportahan ang CSS Grid, at wala ang float). Ang StyleSheet.create ay ginagamit para ilarawan ang mga flex container at ang kanilang mga child element. Mga pangunahing property: flex (coefficient ng pagpuno), flexDirection (row | column), justifyContent, AlignItems.

Sa default, ang flexDirection sa React Native ay column (sa CSS — row). Ito ang unang bagay na dapat tandaan kapag lumilipat mula sa web development. Lahat ng View ay default na flex container. Para i-center ang isang elemento, gamitin ang 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',
  },
});

Mahalaga: sa React Native, lahat ng sukat ay tinutukoy nang walang unit (numero lamang). Gumagana ang mga porsyento, ngunit para lamang sa width at height na nauugnay sa magulang. Ang margin at padding ay tumatanggap ng mga numero. Para sa adaptability, gamitin ang flex sa halip na mga porsyento — ito ay mas maaasahan sa iba't ibang screen.

API ng StyleSheet: create, flatten, hairlineWidth, absoluteFill

API ng StyleSheet ay may kasamang ilang pamamaraan bukod sa create. Pinagsasama ng StyleSheet.flatten ang isang array ng mga estilo sa isang object — kapaki-pakinabang para sa komposisyon at pagpapasa ng mga estilo sa mga third-party na component. Ang StyleSheet.hairlineWidth ay nagbabalik ng pinakamababang nakikitang lapad ng linya sa device.

StyleSheet.absoluteFill — isang paunang tinukoy na estilo { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Ginagamit para sa mga overlay layer, modal window at absolute positioning sa buong screen. StyleSheet.absoluteFillObject — parehong bagay ngunit sa anyo ng isang object para sa pagpapalawak.

// flatten — pagsamahin ang mga estilo
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 — minimal na linya
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth ay kapaki-pakinabang para sa mga separator at border — ito ay laging mukhang 1 physical pixel anuman ang density ng screen. Sa Retina display ito ay 0.5 logical point, sa ordinaryong — 1 point. Huwag gamitin ang hairlineWidth para sa mga elemento na dapat may mahigpit na tinukoy na laki.

Responsive layout gamit ang Dimensions API

Dimensions API ay ginagamit kasama ng StyleSheet para sa responsive na layout para sa iba't ibang laki ng screen. Ang Dimensions.get('window') ay nagbabalik ng lapad at taas ng window. Para sa reaktibong pag-update kapag umiikot ang screen, gamitin ang hook na useWindowDimensions mula sa React Native.

Kahit na hindi sinusuportahan ng StyleSheet.create ang media queries tulad ng CSS, maaari mong kalkulahin ang mga halaga batay sa Dimensions sa loob ng create o gumamit ng dynamic na mga estilo sa pamamagitan ng function. Para sa mga breakpoints, gumawa ng hiwalay na mga estilo para sa iba't ibang hanay ng lapad.

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 ay awtomatikong nag-a-update kapag umiikot ang screen at nagbabago ang laki ng window sa mga tablet na may Split View. Para sa SSR (React Native Web) tiyaking ang Dimensions.get ay tinatawag pagkatapos i-mount ang component upang maiwasan ang mga pagkakaiba sa pagitan ng server at client.

Organisasyon ng mga estilo sa proyekto

Organisasyon ng StyleSheet sa proyekto ay nakakaapekto sa pagpapanatili at muling paggamit ng code. Tatlong approach: lokal na mga estilo sa loob ng component (styles.js sa tabi ng component), global na mga estilo (theme.js na may mga constant ng kulay, espasyo, typography) at modular na mga estilo sa pamamagitan ng komposisyon.

Inirerekomendang istraktura: theme.js na may mga constant ng kulay, laki at typography; Component.styles.js sa tabi ng bawat component para sa mga partikular na estilo nito; StyleSheet.flatten para sa kombinasyon ng base at partikular na mga estilo. Para sa malalaking proyekto, gumamit ng Design System na may pagbuo ng tema.

// theme.js — global constants
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',
  },
});

Mga bentahe ng modular na organisasyon: nag-iisang source ng katotohanan para sa mga kulay at espasyo, pagpapasimple ng refactoring (binago mo ang primary — na-update lahat ng button), muling paggamit ng mga estilo sa pamamagitan ng flatten, pagiging madaling mabasa at predictability ng code. Para sa TypeScript projects, magdagdag ng mga uri para sa tema sa pamamagitan ng declare module.