React Native - Stylisme

Il existe plusieurs façons de styliser vos éléments dans React Native.

Vous pouvez utiliser le stylepropriété pour ajouter les styles en ligne. Cependant, ce n'est pas la meilleure pratique car il peut être difficile de lire le code.

Dans ce chapitre, nous utiliserons le Stylesheet pour le style.

Composant de conteneur

Dans cette section, nous simplifierons notre composant conteneur de notre chapitre précédent.

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'

export default class App extends React.Component {
   state = {
      myState: 'This is my state'
   }
   render() {
      return (
         <View>
            <PresentationalComponent myState = {this.state.myState}/>
         </View>
      );
   }
}

Composant de présentation

Dans l'exemple suivant, nous allons importer le StyleSheet. Au bas du fichier, nous créerons notre feuille de style et l'attribuerons austylesconstant. Notez que nos styles sont encamelCase et nous n'utilisons pas px ou% pour le style.

Pour appliquer des styles à notre texte, nous devons ajouter style = {styles.myText} propriété à la Text élément.

PresentationalComponent.js

import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'

const PresentationalComponent = (props) => {
   return (
      <View>
         <Text style = {styles.myState}>
            {props.myState}
         </Text>
      </View>
   )
}
export default PresentationalComponent

const styles = StyleSheet.create ({
   myState: {
      marginTop: 20,
      textAlign: 'center',
      color: 'blue',
      fontWeight: 'bold',
      fontSize: 20
   }
})

Lorsque nous exécutons l'application, nous recevrons la sortie suivante.