react-native Samouczek
Rozpoczęcie pracy z React-Native

Uwagi

Instalator dla komputerów Mac

Instalowanie menedżera pakietów brew Homebrew

Wklej to po znaku zachęty Terminal.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Instalowanie Xcode IDE

Pobierz go za pomocą poniższego linku lub znajdź w Mac App Store

https://developer.apple.com/download/

UWAGA: Jeśli masz Xcode-beta.app zainstalowany wraz z produkcyjną wersją Xcode.app , upewnij się, że używasz produkcyjnej wersji narzędzia xcodebuild . Możesz ustawić za pomocą:

sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer/

Instalowanie środowiska Android

• git git

  * Jeśli zainstalowałeś XCode, Git jest już zainstalowany, w przeciwnym razie uruchom następujące

  brew install git 
  

• Najnowsze JDK

• Android Studio

  Wybierz instalację niestandardową

  

  Wybierz wydajność i urządzenie wirtualne z systemem Android

  

  Po instalacji wybierz Konfiguruj -> SDK Manager z okna powitalnego Android Studio.

  

  W oknie Platformy SDK wybierz opcję Pokaż szczegóły pakietu i w systemie Android 6.0 (Marshmallow) upewnij się, że zaznaczone są interfejsy API Google, obraz systemu Intel x86 Atom, obraz systemu Intel x86 Atom_64 i obraz interfejsu API Intel x86 Atom_64.

  

  W oknie Narzędzia zestawu SDK wybierz opcję Pokaż szczegóły pakietu, aw obszarze Narzędzia do budowania zestawu SDK systemu Android upewnij się, że wybrano Zestaw narzędzi do kompilacji zestawu SDK systemu Android 23.0.1.

  

• Zmienna środowiskowa ANDROID_HOME

  Upewnij się, że zmienna środowiskowa ANDROID_HOME wskazuje na istniejący zestaw SDK systemu Android. Aby to zrobić, dodaj to do ~ / .bashrc, ~ / .bash_profile (lub cokolwiek innego, czego używa twoja powłoka) i ponownie otwórz terminal:

  Jeśli zainstalowałeś SDK bez Android Studio, może to być coś takiego: / usr / local / opt / android-sdk

  export ANDROID_HOME=~/Library/Android/sdk
  

Zależności dla komputerów Mac

Będziesz potrzebował Xcode na iOS i Android Studio na Androida, node.js, narzędzia wiersza poleceń React Native i Watchman.

Zalecamy instalowanie węzła i stróża za pośrednictwem Homebrew.

brew install node
brew install watchman

Watchman to narzędzie Facebooka do oglądania zmian w systemie plików. Zaleca się zainstalowanie go w celu uzyskania lepszej wydajności. To jest opcjonalne.

Węzeł jest wyposażony w npm, który pozwala zainstalować interfejs wiersza poleceń React Native.

npm install -g react-native-cli

Jeśli pojawi się błąd uprawnień, spróbuj użyć sudo:

sudo npm install -g react-native-cli.

W systemie iOS najprostszym sposobem na zainstalowanie Xcode jest sklep Mac App Store. I dla Androida pobierz i zainstaluj Android Studio.

Jeśli planujesz wprowadzić zmiany w kodzie Java, zalecamy Gradle Daemon, który przyspieszy kompilację.

Testowanie instalacji programu React Native

Użyj narzędzi wiersza polecenia React Native, aby wygenerować nowy projekt React Native o nazwie „AwesomeProject”, a następnie uruchom React-Native Run-ios w nowo utworzonym folderze.

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

Wkrótce powinieneś zobaczyć swoją nową aplikację uruchomioną w iOS Simulator. Reaktywny natywny run-ios to tylko jeden sposób na uruchomienie aplikacji - możesz także uruchomić ją bezpośrednio z Xcode lub Nuclide.

Modyfikowanie aplikacji

Po pomyślnym uruchomieniu aplikacji zmodyfikujmy ją.

• Otwórz index.ios.js lub index.android.js w wybranym edytorze tekstu i edytuj niektóre wiersze.
• Naciśnij Command⌘ + R w symulatorze iOS, aby ponownie załadować aplikację i zobaczyć zmianę! Otóż to!

Gratulacje! Pomyślnie uruchomiłeś i zmodyfikowałeś swoją pierwszą aplikację React Native.

_{źródło: Pierwsze kroki - React-Native}

Instalator dla systemu Windows

Uwaga: w systemie Windows nie można tworzyć aplikacji dla rodzimych programów reagujących, tylko aplikacje dla rodzimych aplikacji reagujących.

Oficjalne dokumenty konfiguracji dla Reaktywny-natywny w systemie Windows można znaleźć tutaj . Jeśli potrzebujesz więcej informacji, znajdziesz tutaj szczegółowy przewodnik .

Narzędzia / środowisko

• Windows 10
• narzędzie wiersza poleceń (np. PowerShell lub wiersz poleceń systemu Windows)
• Chocolatey ( kroki konfiguracji za pomocą programu PowerShell )
• JDK (wersja 8)
• Android Studio
• Maszyna Intel z włączoną technologią wirtualizacji dla HAXM (opcjonalnie, wymagana tylko, jeśli chcesz użyć emulatora)

1) Skonfiguruj maszynę do reagowania na natywny rozwój

Uruchom wiersz poleceń, jako administrator uruchom następujące polecenia:

choco install nodejs.install
choco install python2

Uruchom ponownie wiersz polecenia jako administrator, aby móc uruchomić npm

npm install -g react-native-cli

Po uruchomieniu ostatniej komendy skopiuj katalog, w którym został zainstalowany program reagujący. Będziesz potrzebował tego w kroku 4. Próbowałem tego na dwóch komputerach w jednym przypadku: C:\Program Files (x86)\Nodist\v-x64\6.2.2 . Z drugiej strony było to: C:\Users\admin\AppData\Roaming\npm

2) Ustaw zmienne środowiskowe

W tym rozdziale można znaleźć przewodnik krok po kroku ze zdjęciami.

Otwórz okno Zmienne środowiskowe, przechodząc do:

[Kliknij prawym przyciskiem myszy] Menu „Start” -> System -> Zaawansowane ustawienia systemu -> Zmienne środowiskowe

W dolnej części znajdź zmienną systemową „Ścieżka” i dodaj lokalizację, w której w kroku 1 została zainstalowana funkcja-rodzima.

Jeśli nie dodałeś zmiennej środowiskowej ANDROID_HOME, musisz to zrobić również tutaj. Będąc nadal w oknie „Zmienne środowiskowe”, dodaj nową zmienną systemową o nazwie „ANDROID_HOME” i wartość jako ścieżkę do sdk Androida.

Następnie uruchom ponownie wiersz polecenia jako administrator, aby móc uruchamiać w nim polecenia rodzime dla reagowania.

3) Utwórz projekt W wierszu polecenia przejdź do folderu, w którym chcesz umieścić projekt i uruchom następujące polecenie:

react-native init ProjectName

4) Uruchom projekt Uruchom emulator ze studia Android Przejdź do katalogu głównego swojego projektu w wierszu poleceń i uruchom go:

cd ProjectName
react-native run-android

Możesz napotkać problemy z zależnościami. Na przykład może wystąpić błąd polegający na tym, że nie masz poprawnej wersji narzędzi do budowania. Aby to naprawić, musisz otworzyć menedżera SDK w Android Studio i stamtąd pobrać narzędzia do kompilacji.

Gratulacje!

Aby odświeżyć interfejs, możesz dwukrotnie nacisnąć klawisz r podczas korzystania z emulatora i uruchamiania aplikacji. Aby zobaczyć opcje programisty, możesz nacisnąć ctrl + m .

Instalator dla systemu Linux (Ubuntu)

1) Setup Node.JS

Uruchom terminal i uruchom następujące polecenia, aby zainstalować nodeJS:

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

Jeśli polecenie węzła jest niedostępne

sudo ln -s /usr/bin/nodejs /usr/bin/node

Alternatywy Instalacje NodeJS:

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

lub

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs

sprawdź, czy masz aktualną wersję

node -v 

Uruchom npm, aby zainstalować Native-React

sudo npm install -g react-native-cli

2) Skonfiguruj Javę

sudo apt-get install lib32stdc++6 lib32z1 openjdk-7-jdk

3) Skonfiguruj Android Studio:

Android SDK lub Android Studio

http://developer.android.com/sdk/index.html

Android SDK e ENV

export ANDROID_HOME=/YOUR/LOCAL/ANDROID/SDK
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

4) Emulator konfiguracji:

Na terminalu uruchom polecenie

android

Wybierz „Platformy SDK” w Menedżerze SDK, a obok „Android 7.0 (Nougat) powinien pojawić się niebieski znacznik wyboru. W przeciwnym razie kliknij pole wyboru, a następnie „Zastosuj”.

5) Rozpocznij projekt

Przykładowa aplikacja init

react-native init ReactNativeDemo && cd ReactNativeDemo

Obs: Zawsze sprawdź, czy wersja na android/app/build.gradle jest taka sama, jak narzędzia do kompilacji pobrane na Android SDK

android {
    compileSdkVersion XX
    buildToolsVersion "XX.X.X"
...

6) Uruchom projekt

Otwórz Android AVD, aby skonfigurować wirtualnego Androida. Uruchom wiersz poleceń:

android avd

Postępuj zgodnie z instrukcjami, aby utworzyć urządzenie wirtualne i uruchomić je

Otwórz inny terminal i uruchom wiersze poleceń:

react-native run-android
react-native start