React Native instalace na Mac OS M1

04.12.2022 Programování #react #native

Rozchození React Native na Mac OS M1. Je to věc komplikovaná.

Homebrew

V první řadě musí být nainstalováno Homebrew. Ověření, zda je nainstalováno se provede:

 $ brew --version

pokud se zobrazí

zsh: command not found: brew

pak to znamená, že není nainstalovaný.

Nainstalujte Homebrew pomocí:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Zobrazí se výzva k zadání hesla sudo (heslo vašeho počítače mac/laptop), zadejte jej a pokračujte.

Pak byste měli vidět

...
==> The Xcode Command Line Tools will be installed.

Press RETURN to continue or any other key to abort

Stačí stisknout enter a pokračovat

Po instalaci zkontrolujte verzi vaření zadáním

$ brew --version

Výstupem by měla být úspěšná instalace

$ Homebrew 3.1.3
Homebrew/homebrew-core (git revision 036b0409ce; last commit 2021-04-27)

Node

Dále musí být nainstalováno NODE.js

$ brew install node

Watchman

Watchman má sledovat konkrétní složky nebo soubory, a pokud jsou změněny, může vyvolat některé akce.

$ brew install watchman

Po instalaci potvrďte hlídače pomocí

$ watchman --version

iOS

Pro spouštění aplikace React Native je nutné mít nainstalovaný XCODE. Ten lze nainstalovat z App Storu, nebo stáhnout z developerského účtu. Součástí XCode musí být také příkazový řádek.

Chcete-li nainstalovat nástroj příkazového řádku, budete muset provést následující kroky:

Otevřete Xcode
Z nabídky Xcode vyberte „Settings…“.
Přejděte na panel Umístění
Nainstalujte nástroje výběrem nejnovější verze v rozevíracím seznamu Command Line Tools.

Musí se také nastavit developerský účet a každý projekt musí být podepsán.

Ruby

Pro instalací dalších závislostí je nutné nainstalovat Ruby. Pro instalaci prostředí pro výběr verzí Ruby proveďte následující kroky instalace:

brew install rbenv

Tím se nainstaluje rbenv a plugin [ruby-build] ( https://github.com/rbenv/ruby-build ). Tento plugin přidává příkaz rbenv install, který zjednodušuje proces instalace nových verzí Ruby.

eval "$(rbenv init -)" Dále do svého souboru přidáte příkaz , ~/.bash_profile, aby se rbenv načetl automaticky při otevření terminálu. Chcete-li to provést, otevřete .bash_profile v textovým editoru:

$ nano .bash_profile

Přidejte do souboru následující řádek:

eval "$(rbenv init -)"

Uložte a ukončete soubor.

Dále použijte změny, které jste provedli v souboru ~/.bash_profile, na aktuální relaci shellu:

$ source ~/.bash_profile

Chcete-li ověřit, zda je rbenv správně nastaven, použijte příkaz type, který zobrazí další informace o příkazu rbenv:

$ type rbenv

V okně vašeho terminálu se zobrazí následující:

Output
rbenv is a function
rbenv ()
{
    local command;
    command="${1:-}";
    if [ "$#" -gt 0 ]; then
        shift;
    fi;
    case "$command" in
        rehash | shell)
            eval "$(rbenv "sh-$command" "$@")"
        ;;
        *)
            command rbenv "$command" "$@"
        ;;
    esac
}

V tomto okamžiku máte na svém počítači nainstalované rbenv i ruby-build. To vám umožní nainstalovat Ruby z příkazového řádku v dalším kroku.

S nainstalovaným zásuvným modulem ruby-build si můžete pomocí jediného příkazu nainstalovat jakoukoli verzi Ruby, kterou budete potřebovat. V tomto kroku si vyberete verzi Ruby, nainstalujete ji na svůj počítač a poté ověříte instalaci.

Nejprve pomocí příkatu-l vypište všechny dostupné verze Ruby:

$ rbenv install -l

Výstupem tohoto příkazu bude dlouhý seznam verzí, které si můžete vybrat k instalaci.

Pro použití v RN se poměrně často vyžaduje Ruby2.7.5:

rbenv install 2.7.5

Instalace Ruby může být zdlouhavý proces, takže se připravte na to, že dokončení instalace bude nějakou dobu trvat.

Po dokončení instalace ji nastavte jako výchozí verzi Ruby pomocí dílčího příkazu global:

rbenv global 2.7.5

Zkontrolujte, zda byla Ruby správně nainstalována, a to kontrolou čísla verze:

$ ruby -v

Váš výstup bude vypadat nějak takto:

Output
ruby 2.7.5p62 (2019-04-16 revision 67580) [x86_64-darwin18]

CocoaPods

Cocoapods je správce závislostí na vývoji iOS. Nainstalujte jej pomocí:

sudo gem install cocoapods

Po instalaci zkontrolujte verzi podu

$ pod --version

Nativní rozhraní příkazového řádku React

Spíše než globálně instalovat a spravovat konkrétní verzi React Native CLI se doporučuje přistupovat k aktuální verzi za běhu pomocí npx.

Pojďme vytvořit nový projekt React Native. Nejprve se pomocí příkazu CD přesuňte do požadovaného adresáře.

$ cd Project

Pro vytvoření výchozí aplikace React Native se provede spuštění příkazu?

$ npx react-native init newProject

Přestože se jedná o doporučený příkaz, na Mac OS vykazuje celou řadu chyb a komplikací. Proto se dá použít jeho mírná inovace:

$ npx react-native@0.69 init newProject

Poté následuje

cd ios && pod install && cd ..

Tato sada příkazů se musí provést vždy při instalaci každého balíčku. Jinak nebude fungovat překlad a zobrazení v simulátoru a nevytvoří se potřebný template pro spuštění v nativním prostředí telefonu.

Spuštění templatu se provede příkazem:

$ npx react-native run-ios

Pokud vše půjde dobře, měl by se projekt objevit v simulátoru.

Problémy

Může se stát a to bohužel poměrně často, že se z ničeho nic program nepřeloží, začne se vykazovat chyba po instalaci balíčku apod. Jednou z možných náprav je odstranění nepoužívaných balíčků a vyčištění mezipaměti:

$ npm start --reset-cache 
$ cd ios && pod install && cd ..

Literatura:

https://dera.hashnode.dev/how-to-set-up-react-native-on-mac-os-1