Jak zobrazit native view v React Native (iOS)

Toto je překlad originálního článku Michala Mondíka, který je v aj k přečtení na tomto odkaze.

Tento rok jsem 6 měsíců pracoval na sázkové aplikaci psané v React Native. V určitém bodě jsme byli nuceni zobrazit native view v React Native. V tomto článku bych vám rád ukázal, jak toho docílit.

Jdeme na to. Jako native view použijeme BarChartView z Charts.

Nejdřív si připravíme ChartView.swift, který chceme zobrazit:

Zatím žádná velká věda. Inicializovali jsme graf, nastavili jsme labely k osám x a y a přiřadili k nim příslušná data. Hodnoty proměnných xValues a yValues nastavíme později.

Nyní budeme potřebovat ChartViewManager.m. Protože ve Swiftu není možné užívat makra, musíme si vystačit s Objective-C.

ChartViewManager.m tedy může vypadat nějak takto:

A tady už to začíná být zajímavé. Pojďme si vysvětlit, co jsme právě napsali.

Jako první importujeme RCTViewManager, a poté meetup-Swift.h, který nám umožní použít ChartView.swift v Objective-C.

Vytvoříme si interface pro naši třídu ChartViewManager, který musí mít Manager suffix a zároveň musí být podtřídou RCTViewManageru. Manager suffix tu musí být proto, že React Native automaticky vyhledává třídy s tímto suffixem.

Pak tu máme implementaci samotného ChartViewManageru.

Používáme RCT_EXPORT_MODULE() makro, abychom měli přístup k této třídě z RN, a vrátíme náš ChartView.swift do view funkce. Tato funkce udává, které view bude použito pro tuto třídu v RN.

Nakonec použijeme RCT_EXPORT_VIEW_PROPERTY, kde prvním parametrem bude název RN property, a druhým parametrem bude typ. Toto makro nastaví hodnoty těchto RN props jako proměnné v ChartView.swift.

Takže pojďme dokončit ChartView.swift.

Jediné řádky, které se změnily jsou 6 a 7. Pokud povolíme Objective-C přístup k těmto proměnným (přes @objc), RCT_EXPORT_MODULE() makro z ChartViewManageru.m nám při inicializaci tohoto view automaticky nastaví jejich hodnoty. Pokud by k nim Objective-C neměl přístup, bylo by nutné vytvořit funkce setXValues()/setYValues(), kde bychom museli manuálně nastavit hodnoty těmto proměnným.

Takže teď máme připravený nativní kód, a teď ho stačí dostat do RN.

Začneme s komponentou ChartView.js.

Jednoduše sáhneme pro nativní komponentu se správným názvem — bez Manager suffixu. Poté ji předáme props a zobrazíme.

Naše rodičovská komponenta App.js:

Vložíme sem placeholder pro NavigationBar, pod něj ChartView komponentu do které předáme data v props.

A je to! To je vše, co potřebujete ke zobrazení native view v RN s daty z props.

Snažil jsem se tento článek udržet co nejkratší; pokud máte nějaké otázky, dejte mi vědět do komentářů. Celou implementaci včetně posílání dat z native do RN můžete vidět zde: https://github.com/imtoo/meetup-iOS-bridge

Je zde dost technických detailů — jak, kdy a proč se některé věci automaticky nastavují. Toto téma je ale poměrně obsáhlé a vydalo by na další sérii článků. S implementací do Androidu je to podobné — možná o tom napíšu článek později.

Děkuji za přečtení!