React Native Styling: Styled Components, Flexbox Layouts και άλλα

Το React Native παρέχει ένα API για τη δημιουργία φύλλων στυλ και το στυλ των στοιχείων σας: StyleSheet.

import React, { Component } from 'react'; import { StyleSheet, View, Text } from 'react-native'; export default class App extends Component { render () { return (  I am a header! I am some blue text.  ); } } const styles = StyleSheet.create({ header: { fontSize: 20 }, text: { color: 'blue' } });

Ενώ τα κανονικά φύλλα στυλ CSS δεν είναι έγκυρα, το υπερσύνολο CSS του React Native είναι πολύ παρόμοιο με το παραδοσιακό CSS.

Πολλές ιδιότητες CSS (π.χ. color, height, top, right, bottom, left) είναι το ίδιο με στυλ. Οποιεσδήποτε ιδιότητες CSS που έχουν ενωτικά (π.χ. font-size, background-color) πρέπει να αλλάξουν σε camelCase (π.χ. fontSize, backgroundColor).

Δεν υπάρχουν όλες οι ιδιότητες CSS στο StyleSheet. Δεδομένου ότι δεν υπάρχει αληθινή έννοια του αιωρήματος σε κινητές συσκευές, οι ιδιότητες του CSS hover δεν υπάρχουν στο React Native. Αντ 'αυτού, το React Native παρέχει στοιχεία με δυνατότητα αφής που ανταποκρίνονται σε συμβάντα αφής.

Τα στυλ δεν κληρονομούνται επίσης όπως συμβαίνουν στο παραδοσιακό CSS. Στις περισσότερες περιπτώσεις, πρέπει να δηλώσετε το στυλ κάθε στοιχείου.

Διατάξεις Flexbox

Το React Native χρησιμοποιεί μια εφαρμογή flexbox παρόμοια με το πρότυπο ιστού. Από προεπιλογή, τα στοιχεία στην προβολή θα οριστούν σε display: flex.

Εάν δεν θέλετε να χρησιμοποιήσετε το flexbox, μπορείτε επίσης να κανονίσετε τα στοιχεία React Native μέσω relativeή absoluteτοποθέτησης.

Το Flexbox στο React Native προεπιλογές flexDirection: columnαντί, flex-direction: row(πρότυπο web). Η columnτιμή εμφανίζει ευέλικτα αντικείμενα κάθετα, τα οποία προσαρμόζουν κινητές συσκευές σε κατακόρυφο προσανατολισμό.

Για να μάθετε περισσότερα σχετικά με το flexbox, επισκεφτείτε αυτόν τον αναλυτικό οδηγό για τα CSS-Tricks και μια προσέγγιση εκμάθησης με gamified με το Flexbox Froggy.

Στυλιστικά στοιχεία

Η συμπερίληψη πολλών στυλ σε ένα αρχείο με ένα στοιχείο δεν είναι πάντα εύκολο να διατηρηθεί. Τα στιλ στοιχεία μπορούν να λύσουν αυτό το ζήτημα.

Για παράδειγμα, ένα στοιχείο Button μπορεί να χρησιμοποιηθεί σε πολλά σημεία σε μια εφαρμογή. Η αντιγραφή και επικόλληση του αντικειμένου στυλ με κάθε παρουσία κουμπιού θα ήταν αναποτελεσματική. Αντ 'αυτού, δημιουργήστε ένα επαναχρησιμοποιήσιμο στοιχείο με στυλ:

import React from 'react'; import { Text, TouchableOpacity } from 'react-native'; const Button = ({ onPress, children }) => { const { buttonStyle, textStyle } = styles; return (   {children}   ); }; export default Button; const styles = { textStyle: { alignSelf: 'center', color: '#336633', fontSize: 16, fontWeight: '600', paddingTop: 10, paddingBottom: 10 }, buttonStyle: { backgroundColor: '#fff', borderWidth: 1, borderColor: '#336633', paddingTop: 4, paddingBottom: 4, paddingRight: 25, paddingLeft: 25, marginTop: 10, width: 300 } };

Το στιλ στοιχείο Button μπορεί εύκολα να εισαχθεί και να χρησιμοποιηθεί σε ολόκληρη την εφαρμογή χωρίς να δηλώσετε επανειλημμένα το αντικείμενο στυλ:

import React, { Component } from 'react'; import { TextInput, View } from 'react-native'; import Button from './styling/Button'; export default class Login extends Component { render() { return (    Log In  ); } }

Βιβλιοθήκες για το στυλ

Υπάρχουν μερικές δημοφιλείς βιβλιοθήκες για το στυλ React Native. Ορισμένα από αυτά παρέχουν δυνατότητες παρόμοιες με το Bootstrap, όπως προεπιλεγμένες φόρμες, στυλ κουμπιών και επιλογές διάταξης σελίδας.

Μία από τις πιο δημοφιλείς βιβλιοθήκες είναι στιλ-στοιχεία. Υπάρχουν πολλά άλλα που μπορείτε να βρείτε στο npm και στο GitHub για να δοκιμάσετε μόνοι σας.