Przejdź do treści głównej
Wersja: 0.82

Poznaj podstawy

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

React Native jest podobny do Reacta, ale zamiast komponentów webowych używa natywnych komponentów jako elementów budulcowych. Aby zrozumieć podstawową strukturę aplikacji React Native, musisz poznać podstawowe koncepcje Reacta, takie jak JSX, komponenty, state i props. Jeśli znasz już Reacta, nadal musisz nauczyć się specyficznych dla React Native elementów, takich jak natywne komponenty. Ten samouczek jest przeznaczony dla wszystkich odbiorców, niezależnie od doświadczenia z Reactem.

Do dzieła!

Witaj Świecie​

Zgodnie z odwieczną tradycją naszego ludu, musimy najpierw zbudować aplikację, która nie robi nic poza wyświetleniem "Witaj, świecie!". Oto ona:

Jeśli jesteś ciekawy, możesz pobawić się przykładowym kodem bezpośrednio w symulatorach przeglądarkowych. Możesz też wkleić go do pliku App.js, aby stworzyć prawdziwą aplikację na swoim komputerze.

Co tu się dzieje?​

  1. Po pierwsze, musimy zaimportować React, aby móc używać JSX, który następnie zostanie przekształcony na natywne komponenty każdej platformy.

  2. W linii 2 importujemy komponenty Text i View z react-native.

Następnie definiujemy funkcję HelloWorldApp, która jest komponentem funkcyjnym i zachowuje się tak samo jak w React dla webu. Funkcja ta zwraca komponent View z zastosowanymi stylami oraz Text jako element potomny.

Komponent Text pozwala renderować tekst, podczas gdy View renderuje kontener. Do tego kontenera zastosowano kilka stylów - przeanalizujmy, co robi każdy z nich.

Pierwszym stylem jest flex: 1. Właściwość flex definiuje, jak elementy będą "wypełniać" dostępną przestrzeń wzdłuż głównej osi. Ponieważ mamy tylko jeden kontener, zajmie on całą dostępną przestrzeń komponentu nadrzędnego. W tym przypadku jest to jedyny komponent, więc zajmie całą dostępną przestrzeń ekranu.

Kolejnym stylem jest justifyContent: "center". Wyrównuje to elementy potomne kontenera na środku jego głównej osi. Na koniec mamy alignItems: "center", które wyrównuje elementy potomne na środku poprzecznej osi kontenera.

Niektóre elementy mogą nie wyglądać dla ciebie jak JavaScript. Nie panikuj. To jest przyszłość.

ES2015 (znany też jako ES6) to zestaw ulepszeń JavaScriptu, który stał się częścią oficjalnego standardu, ale nie jest jeszcze obsługiwany przez wszystkie przeglądarki, dlatego często nie jest używany w rozwoju webowym. React Native obsługuje ES2015, więc możesz używać tych funkcji bez obaw o kompatybilność. import, export, const i from w powyższym przykładzie to funkcje ES2015. Jeśli nie znasz ES2015, możesz go szybko opanować, czytając przykładowy kod z tego samouczka. Jeśli chcesz, ta strona zawiera dobre omówienie funkcji ES2015.

Inną nietypową rzeczą w tym przykładzie kodu jest <View><Text>Hello world!</Text></View>. To jest JSX - składnia umożliwiająca osadzanie XML w JavaScript. Wiele frameworków używa wyspecjalizowanych języków szablonów, które pozwalają osadzać kod w znacznikach. W React jest odwrotnie - JSX pozwala pisać znaczniki wewnątrz kodu. Wygląda to jak HTML w sieci, z tą różnicą, że zamiast elementów webowych jak <div> czy <span>, używasz komponentów React. W tym przypadku <Text> to komponent podstawowy wyświetlający tekst, a View odpowiada <div> lub <span>.

Komponenty​

Zatem ten kod definiuje HelloWorldApp, nowy Component. Podczas tworzenia aplikacji React Native będziesz często tworzyć nowe komponenty. Wszystko, co widzisz na ekranie, to jakiś rodzaj komponentu.

Właściwości​

Większość komponentów można konfigurować podczas ich tworzenia za pomocą różnych parametrów. Te parametry tworzenia nazywamy właściwościami (props).

Twoje własne komponenty również mogą używać właściwości (props). Dzięki temu możesz stworzyć pojedynczy komponent używany w wielu miejscach aplikacji, z nieco innymi ustawieniami w każdym przypadku. Odwołaj się do props.YOUR_PROP_NAME w komponentach funkcyjnych lub this.props.YOUR_PROP_NAME w komponentach klasowych. Oto przykład:

Użycie name jako właściwości pozwala dostosować komponent Greeting, dzięki czemu możemy go wielokrotnie wykorzystać do różnych powitań. Ten przykład również używa komponentu Greeting w JSX. Ta możliwość jest tym, co czyni React tak potężnym narzędziem.

Nowym elementem jest tu komponent View. View działa jako kontener dla innych komponentów, pomagając kontrolować styl i układ.

Dzięki właściwościom (props) i podstawowym komponentom Text, Image oraz View możesz budować różnorodne statyczne ekrany. Aby nauczyć się, jak sprawić by Twoja aplikacja zmieniała się dynamicznie, musisz dowiedzieć się o Stanie.

Stan​

W przeciwieństwie do właściwości które są tylko do odczytu i nie powinny być modyfikowane, state pozwala komponentom React na zmianę ich zachowania w czasie w odpowiedzi na działania użytkownika, odpowiedzi sieciowe i inne zdarzenia.

Jaka jest różnica między stanem a właściwościami w React?​

W komponencie React właściwości to zmienne przekazywane z komponentu nadrzędnego do podrzędnego. Stan to również zmienne, z tą różnicą że nie są przekazywane jako parametry - komponent inicjuje je i zarządza nimi wewnętrznie.

Czy istnieją różnice w zarządzaniu stanem między React a React Native?​

tsx
// ReactJS Counter Example using Hooks!

import React, {useState} from 'react';



const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="container">
      <p>You clicked {count} times</p>
      <button
        onClick={() => setCount(count + 1)}>
        Click me!
      </button>
    </div>
  );
};


// CSS
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

tsx
// React Native Counter Example using Hooks!

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

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text>You clicked {count} times</Text>
      <Button
        onPress={() => setCount(count + 1)}
        title="Click me!"
      />
    </View>
  );
};

// React Native Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Jak pokazano powyżej, nie ma różnic w zarządzaniu state między React a React Native. Możesz używać stanu swoich komponentów zarówno w klasach jak i komponentach funkcyjnych z wykorzystaniem hooków!

W poniższym przykładzie pokażemy ten sam licznik co wcześniej, ale zaimplementowany z użyciem klas.