React Native vs Vue Native - Components and Styling

In deze blogpost zal ik verschillen en gelijkenissen aankaarten van basic components en styling tussen React Native en Vue Native.

Components

De components die gebruikt worden in Vue Native zijn hetzelfde als React Native.

Vue Native geeft dit ook aan in hun docs. Ze geven informatie over bepaalde basic components maar sturen ons dan door naar de docs van React Native voor meer informatie.

Vue Native React Native

In React Native en Vue Native zal het gebruik van de basic components hetzelfde zijn. Maar in React Native worden in de tags de eerste letter in hoofdletters gezet.

Het lijkt wel hetzelfde maar ook sommige props worden anders opgeroepen in de components. Bijvoorbeeld bij een Button die bij onPress een event verstuurt.

Bij React Native wordt er in de Button tag onPress={} aangeroepen. Daarin kan je een functie schrijven als volgt onPress={() => {};} of kan je in custom component bijvoorbeeld een functie schrijven en deze dan in onPress oproepen.

In Vue Native is de notatie in de button tag :on-press="Met hierin de methode dat er in de script tag is aangemaakt geweest tussen qoutes".

Styling

In React Native wordt er geen CSS gebruikt maar wordt de styling gedaan via JS.

Je kan dit zowel inline doen maar ook apart daarvoor heeft React Native een component genaamd StyleSheet dit is wel gelijkaardig aan CSS.

Je kan deze dan aanroepen door style={styles.naamClasseObject} en dan zal de stijl toegepast worden. Je ziet de gelijkenissen met CSS maar hier wordt er gecamelcased en in css niet bv. in JS: borderBottomColor: "black" en in CSS: border-bottom-color : "black";

---

In Vue Native kan je wel CSS gebruiken. Een Vue native file is een opgedeeld in 3 delen:

De template waar je je components inzet zoals view, text, button of je custom components;

Script: Waar je methodes en functies declareert;

Style: Hierin kan je dan CSS classes aanmaken.

Je kan deze dan aanroepen zoals je zou doen in HTML. bv. <view class='todo-wrapper">.

Maar je kan ook JS styling doen in Vue Native maar dan wel Inline. Zoals onderstaande afbeelding. Hier wordt er ook v-bind gebruikt. Om een object met key:value waarden door te geven voor styling dat we willen toe te passen.

Dit was het voor de verschillen bij components en styling tussen React Native en Vue Native.

Stay tuned!