PricingLoginStart free
React Academy · Oppitunti

Tyylittely StyleSheet API:lla ja Flexboxilla

Kirjoittakaa mobiilityylejä StyleSheet.creatella ja Flexboxilla ilman CSS-luokan nimiä.

Oppitunti 2/412 vaihetta

Tyylittely StyleSheet API:lla ja Flexboxilla on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Ei CSS:ää React Nativessa

React Native käyttää JavaScript-tyylittely-APIa — ei CSS-tiedostoja, luokkien nimiä eikä kaskadia. Tyylit ovat JavaScript-objekteja, jotka otetaan käyttöön style-propilla.

StyleSheet.create()

Tehkää tyyliobjekteista StyleSheet.create()-kutsun avulla suorituskyvyn parantamiseksi (tyylit validoidaan ja optimoidaan kerran) ja IDE:n automaattisen täydennyksen käyttöön ottamiseksi.

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

function Card() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Hello</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, backgroundColor: '#fff', borderRadius: 8, shadowColor: '#000', shadowOpacity: 0.1, elevation: 2 },
  title: { fontSize: 18, fontWeight: 'bold', color: '#111' },
});

Inline-tyylit

Ottakaa tyylit käyttöön suoraan style-propilla. Taulukkosyntaksi yhdistää useita tyyliobjekteja — myöhemmät tyylit ohittavat aiemmat.

<View style={{ padding: 16, backgroundColor: '#f5f5f5' }} />

// Array merging:
<Text style={[styles.base, isActive && styles.active, { marginTop: 8 }]} />

Flexbox React Nativessa

React Native käyttää Flexboxia asetteluun oletusarvoisesti, mutta sen oletusarvot poikkeavat verkosta: flexDirection on oletusarvoisesti 'column' (ei 'row'), ja flex: 1 täyttää käytettävissä olevan tilan.

const styles = StyleSheet.create({
  container: {
    flex: 1,                   // fill available space
    flexDirection: 'column',   // default in RN (web default is 'row')
    justifyContent: 'center',  // main axis alignment
    alignItems: 'center',      // cross axis alignment
  },
});

Riviasettelu

Käyttäkää flexDirection: 'row' -määritystä lasten asettamiseen vaakasuunnassa. Se vastaa CSS-määrityksiä display: flex; flex-direction: row.

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12, // gap is supported in RN 0.71+
  },
});

<View style={styles.row}>
  <Image source={avatar} />
  <Text>{username}</Text>
</View>

flex vs width/height

Käyttäkää flex: N -määritystä suhteelliseen mitoitukseen. flex: 1 täyttää kaiken jäljellä olevan tilan, kun taas flex: 2 saa kaksi kertaa niin paljon tilaa kuin sisarukset, joilla on flex: 1.

// Sidebar takes 1/3, content takes 2/3:
<View style={{ flexDirection: 'row', flex: 1 }}>
  <View style={{ flex: 1, backgroundColor: '#eee' }}>Sidebar</View>
  <View style={{ flex: 2 }}>Content</View>
</View>

Absoluuttinen asemointi

Käyttäkää päällekkäin asetettaville elementeille position: 'absolute' yhdessä määritysten top, right, bottom ja left kanssa — tämä vastaa CSS:n absoluuttista asemointia suhteellisen yläelementin sisällä.

const badge = StyleSheet.create({
  badge: {
    position: 'absolute',
    top: -4,
    right: -4,
    width: 16,
    height: 16,
    borderRadius: 8,
    backgroundColor: 'red',
  },
});

Alustakohtaiset tyylit

Käyttäkää Platform.OS- tai Platform.select()-määritystä erilaisten tyylien käyttämiseen iOS:ssä ja Androidissa.

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  shadow: {
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOpacity: 0.2, shadowRadius: 4 },
      android: { elevation: 4 },
    }),
  },
});

Värit

React Native hyväksyy CSS-värimerkkijonot (heksadesimaali-, rgb- ja nimetyt värit) sekä järjestelmän värien käyttämiseen tarkoitetun PlatformColor-APIn.

import { PlatformColor } from 'react-native';

// System color — adapts to dark mode automatically:
const labelColor = PlatformColor('label', '#000'); // iOS 'label' semantic color

Dynaamiset tyylit props-arvoilla

Laskekaa tyylit propseista komponentin sisällä. Välittäkää funktio StyleSheetille tai laskekaa tyyliobjekti inline-tyylinä.

function Badge({ color, size = 16 }: { color: string; size?: number }) {
  return (
    <View
      style={[
        styles.badge,
        { backgroundColor: color, width: size, height: size, borderRadius: size / 2 },
      ]}
    />
  );
}

const styles = StyleSheet.create({ badge: { position: 'absolute' } });

Pikatarkistus

Mikä on React Nativen oletusarvoinen flexDirection-arvo, joka poikkeaa verkon oletusarvosta?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Käyttäkää StyleSheet.create()-kutsua optimoitujen tyylien luomiseen ja ottakaa tyylit käyttöön style-propilla. React Nativen Flexboxin oletusarvo on flexDirection: 'column', ja flex: 1 täyttää jäljellä olevan tilan. Käyttäkää Platform.select()-kutsua käyttöjärjestelmäkohtaisten varjotyylien määrittämiseen.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
88
Oppitunnit
324
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Tyylittely StyleSheet API:lla ja Flexboxilla” ilmainen?

Kyllä – oppitunnin ”Tyylittely StyleSheet API:lla ja Flexboxilla” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Tyylittely StyleSheet API:lla ja Flexboxilla”?

Kirjoittakaa mobiilityylejä StyleSheet.creatella ja Flexboxilla ilman CSS-luokan nimiä. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Tyylittely StyleSheet API:lla ja Flexboxilla”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. React Nativen ydinkomponentit ja webin DOM
  2. Tyylittely StyleSheet API:lla ja Flexboxilla
  3. Navigointi Expo Routerilla
  4. Laitteen API:en käyttö: kamera, sijainti ja push-ilmoitukset
← Takaisin: React Academy