React Native Academy · Pelajaran

StyleSheet.create dan Gaya Sebaris

Cipta objek gaya menggunakan StyleSheet.create untuk prestasi, bandingkan dengan gaya sebaris dan gunakan beberapa gaya melalui tatasusunan.

Pelajaran 1 daripada 413 langkah

StyleSheet.create dan Gaya Sebaris ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Cara Gaya React Native Berfungsi

Penggayaan React Native diinspirasikan oleh CSS tetapi menggunakan objek JavaScript, bukannya fail CSS. Nama sifat menggunakan camelCase (backgroundColor bukannya background-color), dan nilai panjang serta saiz ialah nombor yang mewakili piksel bebas peranti — bukan rentetan seperti '16px'. Tiada pemilih, pewarisan berperingkat atau pewarisan (kecuali gaya fon dalam komponen Teks bersarang). Setiap komponen digayakan secara berasingan melalui prop style, memberikan anda kawalan jelas terhadap rupa setiap elemen.

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

export default function StyledBox() {
  return (
    // Inline style object directly
    <View style={{
      width: 120,
      height: 120,
      backgroundColor: '#4f86f7',
      borderRadius: 16,
      padding: 16,
    }}>
      <Text style={{ color: '#fff', fontSize: 18, fontWeight: 'bold' }}>
        Hello!
      </Text>
    </View>
  );
}

StyleSheet.create() untuk Prestasi

StyleSheet.create() menerima objek definisi gaya bernama dan mengembalikan versi yang diproses. Di sebalik tabir, React Native mendaftarkan gaya ini pada lapisan natif dan hanya menghantar ID integer semasa paparan semula berikutnya, bukannya keseluruhan objek gaya. Ini mengurangkan lebihan komunikasi JavaScript-ke-natif — terutama dalam senarai yang kerap dipaparkan semula. Ia juga menjalankan pengesahan gaya dalam mod pembangunan dan memberi amaran jika anda menggunakan sifat yang tidak disokong. Sentiasa utamakan StyleSheet.create berbanding objek sebaris untuk gaya yang tidak berubah.

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

export default function Card() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Card Title</Text>
      <Text style={styles.body}>Card description text goes here.</Text>
    </View>
  );
}

// Defined once, referenced by name
const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    elevation: 3,
  },
  title: { fontSize: 18, fontWeight: 'bold', color: '#222' },
  body: { fontSize: 14, color: '#666', marginTop: 6, lineHeight: 20 },
});

Gaya Sebaris: Bila Perlu Digunakan

Gaya sebaris ditulis terus dalam JSX sebagai literal objek JavaScript: style={{ color: 'red' }}. Gaya ini dicipta semula pada setiap paparan semula, jadi kecekapannya sedikit lebih rendah berbanding gaya StyleSheet.create. Walau bagaimanapun, gaya sebaris sesuai apabila nilai gaya itu dinamik — dikira daripada prop atau keadaan semasa masa jalan. Contohnya, menetapkan backgroundColor berdasarkan warna tema yang dipilih pengguna atau mengira width daripada keadaan komponen semasa. Dalam keadaan ini, StyleSheet.create tidak dapat membantu kerana nilainya berubah semasa masa jalan.

import { View } from 'react-native';

// Inline style: backgroundColor is dynamic (from props)
function ColoredBox({ color, size }) {
  return (
    <View
      style={{
        backgroundColor: color,  // dynamic — must be inline
        width: size,             // dynamic — must be inline
        height: size,
        borderRadius: size / 2,
      }}
    />
  );
}

// Usage:
<ColoredBox color='#ff6b6b' size={80} />
<ColoredBox color='#4f86f7' size={40} />

Menggabungkan Gaya Statik dan Dinamik

Prop style React Native menerima tatasusunan objek gaya. Gaya yang muncul kemudian dalam tatasusunan mengatasi gaya terdahulu untuk sifat yang sama (seperti kekhususan dalam CSS, tetapi lebih mudah). Ini membolehkan anda menggabungkan gaya asas daripada StyleSheet.create dengan penggantian sebaris dinamik: style={[styles.box, { backgroundColor: color }]}. Gaya statik adalah cekap (hanya dihantar sebagai ID), manakala objek sebaris dinamik ditambahkan di atasnya. Nilai palsu dalam tatasusunan (null, undefined, false) diabaikan dengan selamat.

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

export default function Button({ label, primary, style }) {
  return (
    <TouchableOpacity
      style={[
        styles.base,           // always applied
        primary && styles.primary,  // conditional style
        style,                 // caller's overrides
      ]}
    >
      <Text style={[styles.text, primary && styles.primaryText]}>
        {label}
      </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  base: { paddingVertical: 12, paddingHorizontal: 24, borderRadius: 24, borderWidth: 1.5, borderColor: '#4f86f7', alignItems: 'center' },
  primary: { backgroundColor: '#4f86f7', borderColor: '#4f86f7' },
  text: { color: '#4f86f7', fontWeight: '600', fontSize: 16 },
  primaryText: { color: '#fff' },
});

Sifat StyleSheet Lazim

React Native menyokong subset sifat CSS yang ditakrifkan dengan baik. Sifat yang paling kerap digunakan ialah: susun atur (flex, flexDirection, justifyContent, alignItems, padding, margin, width, height), visual (backgroundColor, borderRadius, opacity), dan teks (fontSize, fontWeight, color, lineHeight). Sifat seperti grid, float, display: grid, z-index (gunakan zIndex), serta animasi CSS TIDAK disokong dalam React Native — gunakan Flexbox dan API Animated sebagai gantinya.

const styles = StyleSheet.create({
  // Layout
  container: { flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' },
  // Box model
  box: { width: 100, height: 100, margin: 8, padding: 12 },
  // Visual
  card: { backgroundColor: '#fff', borderRadius: 12, opacity: 0.9, zIndex: 10 },
  // Borders
  bordered: { borderWidth: 1, borderColor: '#ccc', borderStyle: 'solid' },
  // Text styles (only valid on Text component)
  heading: { fontSize: 24, fontWeight: '700', color: '#333', letterSpacing: 0.5 },
});

Nilai Peratusan dalam Gaya

React Native menyokong rentetan peratusan untuk width, height dan sifat penentududukan seperti top, left. Lebar '100%' memenuhi induknya, manakala '50%' mengambil separuh daripadanya, dan seterusnya. Peratusan dikira berdasarkan saiz bekas induk, bukan skrin. Ini berguna untuk kad yang memenuhi lebar (width: '100%') dan susun atur dua lajur (width: '48%'). Untuk mendapatkan lebar skrin itu sendiri, gunakan API Dimensions atau cangkuk useWindowDimensions bagi nilai responsif dan dinamik.

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

export default function HalfBox() {
  const { width } = useWindowDimensions();
  const cardWidth = (width - 48) / 2; // two columns with gutters

  return (
    <View style={styles.row}>
      <View style={[styles.card, { width: cardWidth }]} />
      <View style={[styles.card, { width: cardWidth }]} />
    </View>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', gap: 16, paddingHorizontal: 16 },
  card: { height: 100, backgroundColor: '#4f86f7', borderRadius: 12 },
});

StyleSheet.flatten dan Penggabungan Gaya

StyleSheet.flatten() menerima tatasusunan gaya dan mengembalikan satu objek yang digabungkan. Ini berguna apabila anda perlu membaca nilai gaya akhir yang dikira secara terprogram — contohnya, membaca backgroundColor daripada tatasusunan gaya untuk diserahkan kepada animasi. Ia menyelesaikan gaya tatasusunan dengan cara yang sama seperti React Native: nilai kemudian mengatasi nilai sebelumnya. Mencatat StyleSheet.flatten(styles) juga membantu semasa nyahpepijat untuk melihat dengan tepat gaya yang akan diterima oleh sesuatu komponen selepas semua penggabungan selesai.

import { StyleSheet } from 'react-native';

const base = StyleSheet.create({
  box: { width: 100, height: 100, backgroundColor: 'blue' },
});

const override = { backgroundColor: 'red', borderRadius: 12 };

// Merge and inspect the final style
const final = StyleSheet.flatten([base.box, override]);
console.log(final);
// {
//   width: 100,
//   height: 100,
//   backgroundColor: 'red',   ← override wins
//   borderRadius: 12           ← new property added
// }

StyleSheet.hairlineWidth

StyleSheet.hairlineWidth mengembalikan lebar garisan paling nipis yang boleh digunakan pada peranti semasa — biasanya 0.5 pada paparan retina dan 1 pada skrin berketumpatan lebih rendah. Gunakannya untuk pembahagi dan sempadan nipis yang kelihatan tajam pada sebarang ketumpatan piksel. Ia lebih baik daripada menetapkan borderWidth: 0.5 secara keras kerana hairlineWidth melaraskan dirinya secara automatik mengikut nisbah piksel skrin. Ini ialah perincian kemasan kecil tetapi ketara pada skrin berketumpatan tinggi seperti peranti iPhone dan Pixel moden.

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

// A 1-physical-pixel divider line
export default function Divider() {
  return <View style={styles.divider} />;
}

const styles = StyleSheet.create({
  divider: {
    height: StyleSheet.hairlineWidth,  // thinnest possible
    backgroundColor: '#e0e0e0',
    marginVertical: 8,
  },
});

// StyleSheet.hairlineWidth value:
// Retina (2× pixel ratio) → 0.5
// 3× pixel ratio → 0.333...
// 1× screen → 1

Meletakkan Gaya Bersama Komponen

Konvensyen yang biasa digunakan ialah mentakrifkan gaya di bahagian bawah fail yang sama dengan komponen yang menggunakannya. Ini memastikan kod berkaitan kekal bersama dan memudahkan anda memahami spesifikasi visual penuh sesuatu komponen tanpa membuka fail lain. Untuk komponen yang sangat besar dengan banyak bahagian gaya, anda boleh memisahkan gaya ke dalam fail ComponentName.styles.ts yang berasingan. Elakkan daripada mencipta satu fail global styles.js untuk keseluruhan aplikasi — fail itu akan menjadi sukar diurus dan menyukarkan anda mengetahui gaya yang digunakan di setiap tempat.

// ProfileCard.tsx
import { View, Text, StyleSheet } from 'react-native';

export default function ProfileCard({ name, bio }) {
  return (
    <View style={styles.card}>
      <Text style={styles.name}>{name}</Text>
      <Text style={styles.bio}>{bio}</Text>
    </View>
  );
}

// Styles defined at the bottom of the same file
const styles = StyleSheet.create({
  card: { backgroundColor: '#fff', borderRadius: 16, padding: 20 },
  name: { fontSize: 20, fontWeight: 'bold', color: '#111' },
  bio: { fontSize: 14, color: '#555', marginTop: 6, lineHeight: 20 },
});

Gaya yang Menyokong Mod Gelap

Untuk menyokong mod gelap, gunakan cangkuk useColorScheme bagi mengesan skema semasa ('light' atau 'dark'), kemudian pilih nilai warna yang berbeza untuk setiap mod. Gabungkan ini dengan tatasusunan gaya anda: gaya asas menyimpan susun atur dan bentuk, manakala objek warna dinamik menggunakan warna khusus tema. Pendekatan yang lebih mudah diskalakan ialah ThemeContext yang menyediakan token warna di seluruh aplikasi, tetapi useColorScheme ialah cara terpantas untuk menyediakan mod gelap tanpa pustaka tambahan.

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

export default function ThemedCard({ title }) {
  const scheme = useColorScheme(); // 'light' | 'dark'
  const colors = scheme === 'dark'
    ? { bg: '#1c1c1e', text: '#f0f0f0', border: '#3a3a3c' }
    : { bg: '#ffffff', text: '#111111', border: '#e0e0e0' };

  return (
    <View style={[styles.card, { backgroundColor: colors.bg, borderColor: colors.border }]}>
      <Text style={[styles.title, { color: colors.text }]}>{title}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { borderWidth: 1, borderRadius: 12, padding: 16, marginBottom: 12 },
  title: { fontSize: 18, fontWeight: '600' },
});

Komponen Bergaya dalam React Native

Jika anda lebih suka sintaks CSS-dalam-JS, styled-components boleh digunakan dengan React Native. Pasangnya dengan npm install styled-components dan gunakan kilang styled.View serta styled.Text. Styled-components menjana entri StyleSheet yang dioptimumkan secara dalaman, sambil membolehkan anda menulis sintaks seperti CSS dengan literal templat (gunakan tanda petik tunggal di dalamnya, bukan tanda backtick dengan interpolasi untuk gaya statik). Ia juga menyokong penggayaan dinamik berasaskan props dengan sokongan TypeScript penuh. Banyak pasukan memilihnya kerana pengalaman pengarangan CSS yang biasa.

import styled from 'styled-components/native';

// Define styled components
const Card = styled.View`
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  elevation: 3;
`;

const Title = styled.Text`
  font-size: 18px;
  font-weight: bold;
  color: #222;
`;

export default function StyledCard({ title }) {
  return (
    <Card>
      <Title>{title}</Title>
    </Card>
  );
}

Semakan Pantas

Uji pemahaman anda tentang konsep Pembangunan Mudah Alih React Native daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Imbas Kembali Pelajaran

Dalam pelajaran ini, anda telah mempelajari bahawa StyleSheet.create lebih cekap daripada objek sebaris kerana gaya dihantar sebagai ID, bukan objek penuh; tatasusunan gaya menggabungkan berbilang objek gaya dengan entri kemudian mengambil keutamaan; dan useColorScheme membolehkan penggayaan yang menyedari mod gelap. Seterusnya, kita akan meneroka arah Flexbox, justifyContent dan alignItems untuk kawalan susun atur sepenuhnya.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 30
Pelajaran: 120

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “StyleSheet.create dan Gaya Sebaris” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “StyleSheet.create dan Gaya Sebaris”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “StyleSheet.create dan Gaya Sebaris”?

Cipta objek gaya menggunakan StyleSheet.create untuk prestasi, bandingkan dengan gaya sebaris dan gunakan beberapa gaya melalui tatasusunan. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “StyleSheet.create dan Gaya Sebaris” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?

Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

StyleSheet.create dan Gaya Sebaris
Arah Flexbox, JustifyContent dan AlignItems
flex, flexGrow dan Saiz Responsif
Membina Grid Kad Responsif

← Kembali ke React Native Academy