React Native - Styling

Ci sono un paio di modi per modellare i tuoi elementi in React Native.

Puoi usare il file styleproprietà per aggiungere gli stili in linea. Tuttavia, questa non è la procedura migliore perché può essere difficile leggere il codice.

In questo capitolo useremo il Stylesheet per lo styling.

Componente contenitore

In questa sezione, semplificheremo il nostro componente contenitore dal capitolo precedente.

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>
      );
   }
}

Componente presentazionale

Nell'esempio seguente, importeremo il file StyleSheet. In fondo al file, creeremo il nostro foglio di stile e lo assegneremo al filestylescostante. Nota che i nostri stili sono incamelCase e non usiamo px o% per lo styling.

Per applicare gli stili al nostro testo, dobbiamo aggiungere style = {styles.myText} proprietà al Text elemento.

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
   }
})

Quando eseguiamo l'app, riceveremo il seguente output.